前端使用live-server跨域请求数据

前端的同学应该知道，vue-cli 和 create-react-app 脚手架都提供了跨域问题的解决办法。

vue-cli

vue-cli是在vue.config.js修改devServer.proxy

//vue.config.js
//当前域 http://localhost:8080
//跨域请求接口 http://10.130.100.102:9000/user/info
devServer: {
    proxy:{
      "/proxy":{
         "target":"http://10.130.100.102:9000/",
         "pathRewrite":{
              "^/proxy":""   
          }
     }
}

//app.js
axios({
    url:'/proxy/user/info'  
})
      

create-react-app

相对vue-cli，create-react-app设置代理跨域方法不是太灵活，只能修改项目的 package.json 的proxy字段，而且该字段必须为字符串。

html项目

如果不是以上两种项目，而是h5项目，有没有办法在本地进行跨域代理呢？当然也可以了。

前提是已经安装好了nodejs，然后全局安装 live-server

npm install live-server -g

在项目文件夹根目录下执行npm init ，生成 package.json文件，

在 package.json 添加如下start配置

"scripts": {
    "start": "live-server --open=./html/index.html --port=8088 --proxy=/proxy:http://10.130.100.102:9000"
 }

--open 启动服务器时打开指定的文件

--port 启动指定端口

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

npm start 启动本地服务器

发起请求如下

axios({
    url:'/proxy/user/info'  
})

--proxy=/proxy:http://10.130.100.102:9000" 的 含义是，当请求 '/proxy'开头的地址时，live-server服务器将自动承担代理服务器的角色，请求到数据后转发回本地。