1.什么是跨域
跨域:指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。
注意:跨域限制访问,其实是浏览器的限制
同源策略:是指协议,主机(域名),端口都要相同,其中有一个不同都会产生跨域;
2. 跨域的解决方法
方式一:jsonp
jsonp (JSON With Padding) 就是打包在函数中调动的json,或者包裹的json
json 是一种数据格式;jsonp是一种数据调用方式
//json
{
"name":"小明"
}
//jsonp
callback({
"name":"小明"
})
方式二:CORS
CORS 跨域资源共享(Cross-Origin Resource Sharing)的缩写。它是 W3C 标准,属于跨源 AJAX 请求的根本解决方法。
1、普通跨域请求:只需服务器端设置Access-Control-Allow-Origin
2、带cookie跨域请求:前后端都需要进行设置
cors背后的基本思想是,使用自定义的HTTP头部允许浏览器和服务器互相了解对方,从而决定请求和响应成功与否。
以nodejs的koa框架为例子
app.use(async (ctx, next)=> {
ctx.set('Access-Control-Allow-Origin', '*');
ctx.set('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
ctx.set('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
if (ctx.method == 'OPTIONS') {
ctx.body = 200;
} else {
await next();
}
});
方式三:前端配置反向代理
- 在vue.config.js中配置如下
// 配置基本都是写死的
module.exports = {
// 修改的配置 配置proxy 服务器代理
devServer: {
proxy: {
// 如果请求的地址是以 /api 开头就会请求到'http://121.4.103.100',
'/api': {
target: 'http://121.4.103.100',
changeOrigin: true,
pathRewrite: {
'^/api': '' //请求的时候api会被替换成''
}
}
}
}
}
- 直接使用
/api/xxx/xxx
的uri
调用接口即可代理会将/api
进行替换/src/main.js`
import axios from 'axios';
import VueAxios from 'vue-axios'
// 接口代理时配置的URL,即需要替换的/api
axios.defaults.baseURL = '/api';
axios.defaults.timeout = 8000;
Vue.use(VueAxios, axios);