1.什么是跨域?
发起页面的请求,与请求的服务器,协议,端口,域名,其中有一项不相同的,就会产生跨域问题。
2.跨域错误原因
请求是跨域的,并不一定会报错。普通的图片请求,css文件请求是不会报错的
出现跨域的条件:
浏览器同源策略+请求是ajax请求+请求确实跨域了
跨域错误的本质出在浏览器,是由于同源策略,不是出在服务器端,服务器是可以收到请求的
3.解决方案
目前比较流行的解决方案
1.前端用jsonp方式去发请求
2.后端开启cors 在响应中添加必要的响应头 ,让响应回来之后浏览器不在报错
3.代理转发
怎么解决vue项目中的跨域问题
在vue.config.js
这个配置文件中,它有一项是devServer,它就是我们下边要操作的主角。
module.exports = {
devServer: {
// 代理配置
proxy: {
// 如果请求地址以/api打头,就出触发代理机制
'/api': {
target: 'http://localhost:3000', // 我们要代理的真实接口地址
// http://localhost:9588/api/login -> http://localhost:3000/api/login
changeOrigin: true,
// 如果是false,后端到的请求中的host就是当前浏览器的host:localhost:9588
// 如果是true, 后端收到的请求中的host就是target的值
// 路径重写
// 如果我们不光要使得域名修改,而且还需要改变其它路径,则需要做路径重写
// 比如 我们想把api去掉
// http://localhost:9588/api/login -> http://localhost:3000/login
pathRewrite: {
'^/api': ''
}
}
}
}
}