Vue跨域配置
在Vue项目目录中打开config/index.js,在proxyTable中添写如下代码:
proxyTable: {
'/api': { //使用"/api"来代替"http:// 你的地址(http://127.0.0.1:3000)"
target: 'http:// 你的地址 ', //源地址
changeOrigin: true, //改变源
pathRewrite: {
'^/api': 'http:// 上面的地址,或者空着不写' //路径重写
}
}
}
Node设置跨域 , 在你的app.js里
设置允许所有域名跨域:
app.all("*",function(req,res,next){
//设置允许跨域的域名,*代表允许任意域名跨域
res.header("Access-Control-Allow-Origin","*");
//允许的header类型
res.header("Access-Control-Allow-Headers","content-type");
//跨域允许的请求方式
res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");
if (req.method.toLowerCase() == 'options'){
res.send(200); //让options尝试请求快速结束
}else{
next();
}
}
设置允许指定域名“http://xxxxxx”跨域:
app.all("*",function(req,res,next){
//设置允许跨域的域名
res.header("Access-Control-Allow-Origin","http://xxxxxx");
//允许的header类型
res.header("Access-Control-Allow-Headers","content-type");
//跨域允许的请求方式
res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");
if (req.method.toLowerCase() == 'options'){
res.send(200);
} else{
next();
}
}
设置允许多个域名跨域:
app.all("*",function(req,res,next){
//判断请求头
if( req.headers.origin.toLowerCase() == "http://xxxxxx"
|| req.headers.origin.toLowerCase() =="http://127.0.0.1" ) {
res.header("Access-Control-Allow-Origin", req.headers.origin);
}
//允许的header类型
res.header("Access-Control-Allow-Headers", "content-type");
//跨域允许的请求方式
res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
if (req.method.toLowerCase() == 'options'){
res.send(200);
} else{
next();
}
}
如果允许的域名较多,可以将允许跨域的域名放到数组当中:
app.all("*",function(req,res,next){
var orginList=[
"http://127.0.0.1",
"http://www.xxxxxx.com",
"http://www.baidu.com",
"http://www.alibaba.com",
"http://www.qq.com"
]
if(orginList.includes(req.headers.origin.toLowerCase())){
res.header("Access-Control-Allow-Origin",req.headers.origin);
}
//允许的header类型
res.header("Access-Control-Allow-Headers", "content-type");
//跨域允许的请求方式
res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
if (req.method.toLowerCase() == 'options'){
res.send(200);
} else{
next();
}
}