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代替。