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中的路径即为要跨域请求的域名和端口