前端使用live-server配置代理解决跨域问题

5,234 阅读2分钟

前言

最近在项目中遇到了跨域问题(基于原生的项目),后台配置了好多种方法都没效果(应该是项目配置问题),于是就只好前端解决。前端解决跨域首先就想到了代理,vue中已经有了很好的跨域解决方案就是在vue项目根目录下的vue.config.js文件proxy中设置跨域,那原生项目是不是也可以使用node.js下载相关插件去解决跨域,网上找了找,并处理了一些坑后用live-server解决了跨域。

为什么会有跨域

跨域是因为浏览器的同源策略域名,协议或端口不同,就会跨域

使用live-server代理解决跨域

没有安装node.js的需要先自行安装

初始化项目并全局安装live-server

1,找到自己文件目录cmd调出黑窗口

2,npm init 初始化项目

3,npm install live-server -g全局安装live-server

3,打开生成的package.json文件。


4,在package.jsonscripts中配置启动。


5,保存后,npm run server便可以启动项目。

以代理的方式启动

还是在package.json中的scripts中配置,如下:

{
  "name": "jq",
  "version": "1.0.0",
  "description": "",
  "main": "FileSaver.min.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
	 "server": "live-server --open=./your.html --port=8081",
	  "proxy": "live-server --open=./your.html --port=8081 --proxy=/proxy:http://192.168.1.110:8001"
  },
  "author": "",
  "license": "ISC"
}

/proxy表示请求接口如果用/proxy开头则代理到http://192.168.1.110:8001(这里可以根据自己的需要配置/proxy也可以换成自己喜欢的)

实际使用

输入命令npm run proxy以代理方式启动。

正常方式请求(会出现跨域,axios同理)

使用代理方式。

这样live-server会以代理的方式请求到数据后转发回本地。最后项目发布时别忘了把接口改回来