前端跨域3種基本解決方案

一、 利用webpack反向代理（此方法適合利用框架搭建的項目，以下例子基於vue搭建的項目）

1. 找到已經搭建完成的項目，進入config文件找到index.js如圖

2. 進入index.js 文件后，開始配置代碼如下

proxyTable: {
      '/api': {
        target: "http://127.0.0.1",    //配置需要跨域的IP地址         
        secure: false,                 //https協議需要配置，如果是https此處改為true
        changeOrigin: true,            //是否跨域，true為允許跨域
        pathRewrite: {
          '^/api': '/'
        }
      }
}

 3. 配置完成之后，在文件中引用的寫法如下圖

此處“/api/”是配置跨域時候的“/api/”名字可以改動，並不是固定不變的，但是引用的名字必須和配置時候的名字一樣，否則報錯

二、利用Nginx 反向代理

 1. 首先下載Nginx。下載地址：https://github.com/LHDGH/nginx.git

 2. 下載完成，進入config 文件夾，然后找到nginx.config文件，如下圖

3. 打開nginx.config進行配置，如圖

3. 然后在公共文件（所以頁面都要引入的文件）當中重新定義IP，如下

const baseUrl = "http://localhost:8888/xxx";

　　其中：

　　　　localhost為第二步當中所配置的server_name；

　　　　8888為第二步中所配置的listen；　　

　　　　xxx為第二步中所設置匹配的url，如下圖

4. 配置完成之后，利用終端進入包含有nginx.exe文件的文件夾啟動nginx（啟動命令如下）

nginx.exe 回車

 如果之前已啟動，則需要重啟即可，如下

nginx.exe -s reload

完成以上步驟就可以用nginx反向代理，解決跨域問題了

三、利用http-server反向代理

1. 安裝（全局安裝加 -g）

全局安裝：npm install http-server -g

　　在安裝完成之后，進入文件執行第2步的時候可能會報錯，提示http-server沒有安裝，我自己的解決方案就是重新安裝了一下就好了

　　具體想要研究可以訪問：https://blog.csdn.net/sinat_41747081/article/details/90301155。

2. 進入需要代理的文件（也就是需要啟動服務的文件夾）執行以下命令

http-server 回車（此步驟默認端口8080）

如果直接執行此步驟，本地文件可以通過默認的服務器地址為：localhost:8080或127.0.0.1:8080訪問但並不能解決跨域問題

3. 如果想要解決跨域問題，則需要執行以下命令

http-server -P 需要代理的IP地址 -p 端口號 （可以修改默認的端口）

例如

http-server -P https://baidu.com -p 9999 -c-1

 

　　https://baidu.com 代理的IP地址

　　9999 訪問的端口號

　　-c-1  利用http-server每次瀏覽器會有緩存，不會及時相應（需要清空緩存）而-c-1 的作用瀏覽器不會存在緩存

　　執行以上命令可以通過 localhost:9999.文件名 訪問頁面

　　在公共js中定義IP 如

 

const baseUrl = "http://localhost:9999";　

完成以上步驟就可以通過http-server實現本地代理進行跨域

訪問本地文件： loaclhost:9999/xxxx.html

以下是http-server的命令