Vue 跨域問題

今天一個小老弟在那問我子姜，哥給我看看代碼洗做，接口都測試通過了梳虽，怎么前端拿不到后端的數(shù)據(jù)址芯，控制臺老是報這個錯誤“Access-Control-Allow-Origin”。這就是跨域的問題窜觉。

出現(xiàn)跨域問題的原因

由于瀏覽器的同源策略導致谷炸，是瀏覽器對 javascript 施加的安全機制。通俗的講就是兩個不在同一個域名端口上的項目禀挫，在想獲取資源時旬陡，一方對另一方施加訪問的限制。

這里拿aaa.com域名來舉例特咆，aaa.com對應的外網(wǎng)IP地址為199.6.7.2

解決跨域

1. Vue解決

這是我們的前端項目地址：http://127.0.0.1:8080/

這是我們的后端接口地址：http://127.0.0.1:8000/

（1）在vue項目的根目錄下季惩，新建vue.config.js文件

（2）寫入以下代碼

module.exports = {
  // vue.js里解決跨域問題
  devServer: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:8000/', // 目標地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': '' // 需要重寫的地址
        }
      }
    }
  }
}

說明：這里當前端訪問到 /api 這個路徑的時候，會將url代理到 http://127.0.0.1:8000/ 這個目標地址上腻格，并將 /api 這個路徑重寫画拾。

舉個例子：這是我們后端提供的接口 http://127.0.0.1:8000/system/slider/list ，如果前端的axios直接訪問這個接口的話菜职，由于前端的端口是8080青抛，后端的端口號是8000，會引起不同域名不同端口的跨域問題酬核。于是蜜另，我們引入上面的代碼段适室，讓前端訪問的接口改為 http://127.0.0.1:8080/api/system/slider/list 。這樣前端訪問的接口 http://127.0.0.1:8080/api 這一段url會代理到 http://127.0.0.1:8000 上举瑰，這樣就滿足了同源策略捣辆，因此解決跨域問題，接口得以正常訪問此迅。

2. Nginx解決

使用nginx作為代理服務器汽畴，這樣用戶只需要在80端口上進行前后端的交互，這樣就能避免不同源的問題耸序，因此來實現(xiàn)跨域忍些。

（1）打開nginx.conf文件

（2）修改nginx配置為下面代碼

server {
    listen 80;
        server_name 127.0.0.1;

    location / {
        proxy_pass http://127.0.0.1:8080;
    }

    location ~ /api {
        proxy_pass http://127.0.0.1:8000;
    }
}

說明：Nginx監(jiān)聽80端口，將 http://127.0.0.1 的所有請求服務轉發(fā)到127.0.0.1端口為8080坎怪；將 http://127.0.0.1/api 請求轉發(fā)到 http://127.0.0.1:8000 上罢坝，nginx實現(xiàn)跨域的原理，實際上就是把web項目和后端接口項目放到同一個域中搅窿，這樣滿足同源的策略嘁酿，然后根據(jù)請求地址去請求不同的服務器。

舉個例子：當用戶訪問 http://127.0.0.1 這個地址時戈钢，會被nginx轉發(fā)到 http://127.0.0.1:8080 這個地址上痹仙，這樣就能訪問到我們的前端項目；當用戶想訪問 http://127.0.0.1:8000/system/slider/list 這個接口時殉了，就必須把接口url換個形式开仰，用 http://127.0.0.1/api/system/slider/list 這個url來訪問接口，讓其接口請求轉發(fā)到 http://127.0.0.1:8000/system/slider/list 這個接口url上薪铜。

如有不當之處众弓，歡迎指正，謝謝８艄俊Ｎ酵蕖！

如需轉載蜒滩，請加上本文的鏈接并標明出處

一條愛吃屎的狗：https://www.qnmlgb.top