搞定vue项目开发环境下的跨域代理

跨域知识

同源政策

1.三同

协议相同 (比如：http://)
域名相同 (比如：www.baidu.com)
端口相同 (比如：80，默认情况下是可以省略的)

2.目的

• 保证用户信息的安全，防止恶意的网站窃取数据

3.限制范围

1.Cookie、LocalStorage 和 IndexDB 无法读取

2.DOM 无法获得

3.AJAX 请求不能发送

跨域产生

产生跨域的原因就是不同源的请求违反了浏览器里的同源政策

vue跨域代理详解

解决跨域的方法是非常多的，像jsonp,cors,node代理，等等之类的，在这里主要介绍vue项目中自带的代理跨域

vue 自带代理配置选项

老版本vue脚手架创建的项目的代理配置

• 1.1找到config这个文件下的index.js

• 1.2找到module.exports中的dev属性里的proxyTable

• 1.3写入代理配置

  module.exports = {
    dev: {
      // Paths
      assetsSubDirectory: 'static',
      assetsPublicPath: '/',
      proxyTable: {
        //所代理的字段  
        "/api": {
          //会产生跨域的接口地址，填基本的地址就好了
          target: "http://150.158.182.131:8080",
          changeOrigin: true,
          //重写代理的路径
          pathRewrite: {
              //就是用""来代替/api,就可以不用写api了
              "^/api": ""
          }
      }
      }
    }
  

• 1.4在请求的时候这样写

  //这样的接口请求
  // http://150.158.182.131:8080/api/post/login
  axios.post('/api/post/login')
  

• 1.5重启项目配置生效

新版本vue脚手架的代理配置

• 1.1新版本的项目下没有了以往的配置文件，所以在根目录下创建一个vue.config.js文件

• 1.2跟老项目一样，写入module.exports = {}

• 1.3写入以下配置

  devServer: {
          proxy: {
              '/api': {
                  target: 'http://150.158.182.131:8080', 
                  ws: true,  //代理websockets
                  changeOrigin: true, // 虚拟的站点需要更管origin
                  pathRewrite: {  
                      '^/api': ''
                  }
              }
          }
      }
  

• 1.4请求方法跟老版本一样，重启项目生效