JS跨域产生的原因及解决方案
跨域的由来
跨域问题来源于JavaScript的同源策略,表示只有 协议+域名+端口号 (如存在)相同,即相同的域,则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源。
当一个请求url的协议、域名、端口三者之间的任意一个与当前页面url不同即为跨域。跨域的本质是浏览器基于同源策略的一种安全的手段,是一种约定,它是浏览器最核心也是最基本的安全功能。注意服务器之间的请求是不存在跨域问题的!
如下:图片转自 https://blog.moonlet.cn/archives/563
请求一个接口时浏览器控制台出现'Access-Control-Allow-Origin'就说明请求跨域了。
vue-cli4.x配置 proxy 代理解决跨域
原理:
- 将域名发送给本地的服务器
- 再由本地的服务器去请求真正的服务器
- 因为请求是从服务器端发出的,所以就不存在跨域的问题了
vue-cli4所有的配置都在 vue.config.js 完成,所以在 vue.config.js 中做以下配置解决跨域:
module.exports = { devServer: { host: 'localhost', port: '8080',//端口号为前端的端口号 proxy: { '/api': { // 匹配所有以 '/api'开头的请求路径 target: 'http://localhost:4000', // 代理目标的基础路径 changeOrigin: true, // 允许跨域 pathRewrite: {// 重写路径: 去掉路径中开头的'/api' '^/api': '' } } }, } }
注意:修改 vue.config.js 文件后需要重启服务。前端使用axios请求时路径直接使用/api代替。