前端使用live-server跨域请求数据
前端的同学应该知道,vue-cli 和 create-react-app 脚手架都提供了跨域问题的解决办法。vue-clivue-cli是在vue.config.js修改devServer.proxy//vue.config.js//当前域 http://localhost:8080//跨域请求接口 http://10.130.100.102:9000/user/infodev...
前端的同学应该知道,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服务器将自动承担代理服务器的角色,请求到数据后转发回本地。
更多推荐
所有评论(0)