nodejs服務(wù)器端跨域設(shè)置
使用一個中間件
app.use(async (ctx,next)=> {
// * 表示允許所有域名訪問,可以設(shè)置指定的域名
ctx.set('Access-Control-Allow-Origin', '*');
await next();
})
更為復(fù)雜一點的跨域中間件如下:
module.exports = app => {
// 跨域設(shè)置
app.use(async (ctx, next) => {
// 跨域設(shè)置
ctx.set("Access-Control-Allow-Origin", "*");
// 請求頭設(shè)置
ctx.set(
"Access-Control-Allow-Headers",
`Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild,x-token,sessionToken,token`
);
ctx.set("Access-Control-Allow-Methods", "PUT, POST, GET, DELETE, OPTIONS");
// 一天內(nèi)不會發(fā)送options請求
// ctx.set('Access-Control-Max-Age', '86400');
// 預(yù)請求處理
if (ctx.method == "OPTIONS") {
ctx.body = 200;
} else {
await next();
}
});
};
webpack設(shè)置跨域
- 我們的服務(wù)器域名是 http://132.232.94.151:3005,而我們本地跑的服務(wù)端口域名為http://localhost:8082
這時候我們本地的項目去訪問遠程的接口就是跨域了,會出現(xiàn)如下提示
Access to XMLHttpRequest at 'http://132.232.94.151:3005/goods' from origin 'http://localhost:8082' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
- 如果服務(wù)器沒有設(shè)置跨域,我們可以在webpack去設(shè)置跨域,具體做法如下:
.env.development 配置
VUE_APP_URL="/api" // 即使我們的接口地址沒有api,也是這樣寫,后面有說明
axios的攔截器使用 process.env.VUE_APP_URL獲取上面環(huán)境配置的地址
const service = axios.create({
baseURL: process.env.VUE_APP_URL, // api 的 VUE_APP_URL
timeout: 50000 // 請求超時時間(因為需要調(diào)試后臺,所以設(shè)置得比較大)
});
-
項目根目錄vue.config.js(若沒有就創(chuàng)建)配置跨域
module.exports = { devServer: { proxy: { // 只要請求地址有'api'都會匹配上 // 只要請求地址有'api'都會匹配上 "/api": { target: "http://132.232.94.151:3005", ws: true, changeOrigin: true, pathRewrite: { "^/api": "" //通過pathRewrite重寫地址，將前綴/api轉(zhuǎn)為/ } } } } } -
我們的vue項目里有如下請求
created() { let url = "/goods"; this.$axios .get(url) .then(result => { console.log("result", result); }) .catch(err => { console.log("err", err); }); } -
查看我們的控制臺的network發(fā)現(xiàn),我們發(fā)送了這樣的一個請求
http://localhost:8082/api/goods -
很神奇的是我們竟然拿到了數(shù)據(jù),原因就是,上面我們配置的proxy(代理的意思),當我們發(fā)送請求```http://localhost:8082/api/goods``,這個代理插件發(fā)現(xiàn)我們的請求帶有'api',它就我們把這個請求轉(zhuǎn)發(fā)到http://132.232.94.151:3005, 同時下面的這個配置
pathRewrite: { "^/api": "" //通過pathRewrite重寫地址，將前綴/api轉(zhuǎn)為/ }能幫我們把/api 變?yōu)?,所以我們請求 http://localhost:8082/api/goods, 最后實際上我們請求的是 http://132.232.94.151:3005/goods
"^/api": "" //通過pathRewrite重寫地址，將前綴/api轉(zhuǎn)為/
}能幫我們把/api 變?yōu)?,所以我們請求 http://localhost:8082/api/goods, 最后實際上我們請求的是 http://132.232.94.151:3005/goods
