Vue实现跨域问题

一、什么是跨域？

当一个请求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脚手架，解决跨域的代码略有不同。

• 2.1、基于Vue-cli2项目的解决方法

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/'即可.
        }
      }

发起请求：

请求结果：

• 2.2、基于Vue-cli3项目的解决办法

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': '' 
        }
      },
    }
  },