一、什么是跨域?
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url的不同即为跨域。
当前页面url | 被请求页面url | 是否跨域 | 原因 |
---|---|---|---|
http://www.test.com/ | http://www.test.com/index.html | 否 | 同源(协议、域名、端口号相同) |
http://www.test.com/ | https://www.test.com/index.html | 跨域 | 协议不同(http/https) |
http://www.test.com/ | http://www.baidu.com/ | 跨域 | 主域名不同(test/baidu) |
http://www.test.com/ | http://blog.test.com/ | 跨域 | 子域名不同(www/blog) |
http://www.test.com:8080/ | http://www.test.com:7001/ | 跨域 | 端口号不同(8080/7001) |
在前后端分离项目中,前端地址是localhost:8080,后端地址是localhost:9000此时端口号不同,就产生跨域问题。
二、前端解决跨域的方法
一定要注意:不同的Vue脚手架,解决跨域的代码略有不同。
Vue-cli2即脚手架2。
通过 vue init webpack your-project-name 创建的项目,默认npm run dev启动项目
脚手架2创建的项目目录结构:
在config中的index.js中的proxyTable{ }添加下面代码
'/api': {
target: 'http://localhost:9000',//设置你调用的接口域名和端口号 别忘了加http
changeOrigin: true, //允许跨域
pathRewrite: {
'^/api': ''//如果后端接口为'http://localhost:9000/user/',
//前端调用时直接写'/api/user/'即可.
}
}
发起请求:
请求结果:
Vue cli3(即脚手架3)。
通过vue create your-project-name创建的项目,默认通过npm run serve启动。
脚手架3项目目录结构:
在vue项目根目录下找到vue.config.js文件(如果没有该文件则自己创建),在proxy中设置跨域
devServer: {
proxy: { //配置跨域
'/api': {
target: 'http://131.132.67.111:8888/', //这里后台的地址模拟的;应该填写你们真实的后台接口
changeOrigin: true, //允许跨域
pathRewrite: {
/* 重写路径.当我们在浏览器中看到请求的地址为:http://localhost:8080/api/user 时
实际上访问的地址是:http://131.132.67.111:8888/user,因为重写了 /api 为 /
*/
'^/api': ''
}
},
}
},