跨域复习

使用webpack的proxy

vue.config.js

module.exports ={
    //代理跨域
    devServer:{
        proxy:{
            '/api':{
                target:'http://39.98.1223.211'
            }
        }
    }
}

 

当协议，端口，域名有一个不同时，此时就需要跨域;

跨域的几种解决方式:Webpack proxy， nginx反向代理， webpack plugin，jsonp, cors;

1.webpack中的proxy

module.exports = {
    devServer:{
        proxy:{ //代理
        '/api':{
            target:'http://localhosy:3000',
            //后端无需使用/api开头
            pathRewrite:{'/api':''}
            }
        }
    }
​
}

后端拦截api的请求

let xhr = new XMLHttpRequest();
xhr.open('get','/user',true);
xhr.onload= function(){
    console.log(xhr.response);
}
xhr.send();

2.CORS

var allowCrossDomain =function(req,res,next){
    //请求源 ajax http://localhosy:8080 *允许任何请求源
    res.header("Access-Control-Allow-Origin","*");
    //请求头 x-token 允许任何请求头
    res.header("Access-Control-Allow-Headers","*");
    //请求方法 get post put del
    res.header("Access-Control-Allow-Methods,"*");
    newxt();
}
app.use(allowCrossDomain);
//app.get('/user',(req,res)=>{
    res.json{name:'xj'}
})
app.listen(3000,function(){
console.log('服务器启动，端口3000')
})