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.

上線了如果還有跨域 可以讓后台設置 允許跨域