前端跨域问题
跨域是浏览器为了安全而做出的限制策略,浏览器请求必须遵循同源策略:同域名、同协议、同端口
CORS跨域 :服务端设置,前端直接调用
说明:后台允许前端某个站点进行访问 (axios)
JSONP跨域 : 前端适配,后台配合
前后台同时改造
npm install jsonp --save-dev
jsonp(url, {option}, (error, res) => {
console.log(res)
})
代理跨域 : 通过修改nginx服务器配置来实现
前端修改,后台不动
vue.config.js
module.exports = {
devServer:{
host:‘localhost‘,
port:8080,
proxy:{
‘/api‘:{
target:‘https://www/imooc.com‘,
changeOrigin:true,
pathRewrite:{
‘/api‘:‘‘
}
}
}
}
}a.vue
mounted(){
let url = "/api/activity/servicetime";
jsonp(url,(err,res)=>{
let result = res;
this.data = result;
})
}