vue 本地和線上跨域的問題 個人解決方案

產生跨域問題的原因

　　跨域是因為瀏覽器的同源策略所導致的。所謂同源是指"協議+域名+端口"三者相同，即便兩個不同的域名指向同一個ip地址，也非同源。瀏覽器引入同源策略主要是為了防止XSS，CSRF攻擊。

常見跨域問題的解決方式

• 使用jsonp
• 服務端代理
• 服務端設置Request Header頭中Access-Control-Allow-Origin為指定可獲取數據的域名 

本地開發模式

如果是本地開發模式下 就沒有必要再去麻煩后端去解決一下跨域問題。vue 本地開發提供了一個很好的解決跨域問題 請求轉發

如果是vue腳手架找到vue.config.js中配置,如果是自己搭的開發環境找到對應的配置文件(大部分應該都在config文件夾下的index.js)

  devServer: {
    proxy: {
      '/api': { //匹配api開頭的走代理
        target: process.env.VUE_APP_BASE_API, // 接口地址
        changeOrigin: true,  //允許跨域
        pathRewrite: {
          '^/api': '' //重新路由，訪問后端接口不一定是api 開頭的這個時候就可以改變
        }
      }
    }
  },

線上開發

因為我們這邊計划 前端統一打包分發多個地區，而不是各個地區分別去線上打包，提高版本發布效率，而且保證線上各個地區代碼一致性.又因為各個地區接口地址也是獨立的,所以接口地址不能寫在配置文件中。

所以在各個地區的nginx服務器做了代理轉發。具體配置如下：

server {
    listen 80;
    server_name 域名;
    root ####;

    location / {
      try_files $uri $uri/ /index.html;  //解決 HTML5 History 模式直接訪問子路由404問題
    }

    location ^~/api/ {

      proxy_pass  域名或者ip地址:端口/; //匹配api開頭的請求 端口后面加 / 請求的時候會把api去掉 不加 / 會帶上完整的訪問接口地址，這個可以和后端約定

    }

}

 

其他的跨域解決方案可以自行到網上搜搜 我這邊只是把自己遇到的問題做個筆記