vue.js及H5常見跨域問題解決方案

一.原生H5跨域問題解決方案

1.live-server 代理解決

首先在有node.js環境下，打開命令行工具，輸入

npm install live-server -g

全局安裝全局安裝 live-server

 

在項目文件夾下打開終端（命令行工具）輸入

npm install

自動生成package.json配置文件

配置以下字段

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "live-server --open=./H5/dfbd/asdad.html --port=8088 --proxy=/portal:http://180.xxx.xxx.xxx:8080/sdv/"
  },

--open 啟動服務器、調試時打開指定的文件

--port 啟動指定端口

--proxy 要跨域請求的域名和端口

 

以上配置完畢后代理就完成了，調試執行時在終端中執行npm start命令

執行成功便會打開代理中的open對應的文件。

二.vue項目中配置代理

1.vue項目中vue-cli腳手架工具自帶代理功能，只需要配置即可

在項目中找到vue.config.js

修改devServer下的proxy

devServer:{
    proxy:{
        "/proxy":{
           "target":"http://192.168.1.123:8080/",
            "pathRewrite":{
                  "^/proxy":""
             }
         }
    }
}

target中的路徑即為要跨域請求的域名和端口