vue使用Proxy代理跨域

什么是跨域？

协议 域名 ip地址 端口 任何一个不一样 就跨域

解决跨域？

1 jsonp 使用script的src发送 只能get 请求

2 cors 后台设置允许跨域 需要后台设置 允许跨域

​ 所有后台语言 都可以设置

3 服务器代理，服务器之间不存在跨域问题

vue在 vue.config.js 可以配置重写webpack代理

webpack代理原理：

说白了 就是通过 在本地通过nodejs 启动一个微型服务,然后我们先请求我们的微型服务, 微型服务是服务端, 服务端**代我们去请求我们想要的跨域地址, 因为服务端是不受同源策略**的限制的, 具体到开发中,打包工具webpack集成了代理的功能,可以采用配置webpack的方式进行解决, 但是这种仅限于 本地开发期间, 等项目上线时,还是需要另择代理 nginx

 以下为vuecli中配置代理的配置 ：

官方地址：
https://cli.vuejs.org/zh/config/#devserver-proxy

//  在根目录添加一个  vue.config.js  文件，即src下面
//  重启项目
module.exports = {
  //以下配置的效果
  //   “/api/getok.php”  -->   http://122.51.238.153/getok.php
  // 修改的配置
  devServer: {
      proxy: {
          //如果地址以/api开头，它就会请求到 http://122.51.238.153 
          '/api': {
              target: 'http://122.51.238.153',
              changeOrigin: true,
              ws: true, 
              pathRewrite: {
                    '^/api': '',   //重写请求路径
              },
          }
      }
  }
}

target：接口域名；

changeOrigin： 如果设置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求；
ws ： 是否代理 websockets

pathRewrite：写 /api/xx/xx. 最后代理的路径就是 http://xxx.xx.com/api/xx/xx.
不对啊, 我正确的接口路径里面没有/api啊. 所以就需要 pathRewrite,用'^/api':'', 把’/api’去掉, 这样既能有正确标识, 又能在请求接口的时候去掉/api.

上线了如果还有跨域 可以让后台设置 允许跨域