小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
前言
1、什么是跨域 跨域的产生来源于现代浏览器所通用的‘同源策略’,所谓同源策略,是指只有在地址的:
- 协议名 https,http
- 域名 a.xxx.cn xxx.cn
- 端口名 xxx.cn:8080/json/jsonp/… xxx.cn/json/jsonp/jsonp.html 均一样的情况下,才允许访问相同的cookie 或是发送Ajax请求等等。若在不同源的情况下访问,就称为跨域。
由于浏览器的同源策略,在前端的开发中会有很多需要做跨域的时候需要做反向代理,有些时候我们还需要对header头做各种配置,这里推荐一个简单好用的node包
js-node-proxy www.npmjs.com/package/js-…
推荐理由:
简单 实用
使用说明
js-node-反向代理
- 安装
npm i js-node-proxy
- 引入
const {createProxy} = require('js-node-proxy')'
- 使用
const {createProxy} = require('js-node-proxy')
createProxy(
{
port:'3888',
agency:{
from:'/api',
to:'https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Access-Control-Allow-Headersers/Access-Control-Allow-Headers'
},
res:{
AllowOrigin:'http://baidu.com',// 允许跨域的域名,
AllowHeaders:'content-type,x-token,platform,language,pc-token',
headers:{
'ddd' : 'ddd'
}
}
}
)
- 更新
npm update js-node-proxy
说明
原理解释:
因为跨域的产生的原因是你使用浏览器访问的时候才会有的问题,此服务,通过node访问指定的域名(这里node访问没有跨域限制),然后再响应给你实际的访问的浏览器端以跨域设置来达到可以跨域的目的,如图:
默认配置
本插件由于使用在开发环境,所以默认运行cookie 和 运行所有的访问访问 get,post 等等
启动
安装完成后,启动你的文件,假设你的问题是index.js ,那么使用命令行进入当前目录后,直接 使用
node index.js
命令启动即可,(当然前提是你要先安装node) 这个时候,你会得到
代表启动成功, 这个时候,你可以直接在浏览器使用locahost:3888/api 或者 controle + 鼠标点击console 出来的链接 来访问接口啦。
常见错误
端口占用
遇到这个问题的时候,在配置文件的port 中重新配置一个端口即可