在Vue中,當我們使用axios或其他http庫向其他域名發送跨域請求時,往往會遇到Preflight的問題。
Pre-flight是一個預檢請求,以確保發送的請求是可以被服務器接受的。當請求需要發送諸如Cookie、自定義的請求頭等內容時,需要進行對CORS的預檢請求。此時瀏覽器會先發送一次OPTIONS請求來預檢,服務器返回一些信息告訴瀏覽器是否允許發送真正的請求。
// 發送帶有自定義header的請求
axios({
baseURL: 'http://api.example.com',
headers: {
'X-Custom-Header': 'foobar'
}
}).then(...)
在這個例子中,如果服務器沒有正確配置CORS,那么瀏覽器會發出OPTIONS請求,檢查服務器是否允許帶有自定義請求頭的請求。
我們需要在服務器端返回必要的頭部信息,比如在Node.js中,代碼示例如下:
app.use((req, res, next) =>{
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type,Accept,X-Requested-With');
next();
});
以上代碼中,Access-Control-Allow-Origin設置為星號,表示允許所有域名的請求,Access-Control-Allow-Methods和Access-Control-Allow-Headers分別設置允許的請求方式和請求頭。在實際的開發中,我們可以根據需要配置這些響應頭。