反向代理解决跨域问题

发表于 分类于 Waline：

现在大多数都是前后端分离,这时候,跨域问题就是前端小伙伴们关心的问题了,跨域的方法有很多种,今天重点说一下利用node或者nginx做反向代理

什么是跨域?

跨域是由浏览器同源策略引起的，是指页面请求的接口地址，必须与页面url地址处于同域上（即域名，端口，协议相同）。这是为了防止某域名下的接口被其他域名下的网页非法调用，是浏览器对JavaScript施加的安全限制。

简单的来说,必须是相同的域名和相同的端口号才可以,否则就会存在跨域的问题

解决方法

简单的介绍一下前面几种方法

  1. document.domain + iframe (只有在主域相同的时候才能使用该方法,这是变更源的一种操作 )
  2. 动态创建script (这个没什么好说的，因为script标签不受同源策略的限制。简单的说,有src属性的标签都不受同源策略的限制)
  3. location.hash + iframe(同样需要目标服务器作处理,原理是利用location.hash来进行传值)
  4. window.name + iframe (需要目标服务器响应window.name)
  5. postMessage（这个也是需要目标服务器或者说是目标页面写一个postMessage，主要侧重于前端通讯。HTML5中的XMLHttpRequest Level 2中的API）
  6. web sockets (web sockets是一种浏览器的API，它的目标是在一个单独的持久连接上提供全双工、双向通信。所以同源策略对web sockets不适用)
  7. JSONP(jsonp应该是比较常用的了,但是需要目标服务器配合一个callback函数,并且它只支持GET请求而不支持POST等其它类型的HTTP请求)
  8. CORS (这是目前最基本的解决方法,服务端会在HTTP请求头中增加一系列HTTP请求参数,例如Access-Control-Allow-Origin,但是需要后端的配合)

以上八种跨域方式,只是稍微的说明一下,因为大多数都要后端进行配合,就没有我们前端独立就能完成的吗,今天重点说一下如何使用服务器进行反向代理

Node服务器反向代理

首先, npm install express –save , npm install http-proxy-middleware –save,现在node包弄好,

随后在这个文件中创建一个public文件夹,用来放我们的静态资源

之后在跟目录中新建一个server.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var express = require('express');

var proxy = require("http-proxy-middleware");

var app = express();

app.use(express.static("./public"));

app.use('/api', proxy({
  	target: 'https://api.douban.com', //这句话的意思就是说，凡是你的ajax请求里面带api的 就还会自动帮你向http://www.example.com这里进行数据请求
    changeOrigin: true,
    pathRewrite:{
      '^/api': ''
    }
}));

app.listen(3000);

现在就可以进行跨域啦，比如我要请求的地址是 https://api.douban.com/v2/music/search?q=周杰伦
这时，我只需要将地址改成 /api/v2/music/search?q=周杰伦 就可以啦。

nginx代理

首先打开nginx的官网进行下载稳定版本，下载好后直接解压到你想要的文件夹下，启动nginx.exe文件，会出现一个一闪而过的页面，然后打开任意一个浏览器，输入 localhost，如果出现Welcome to nginx!几个大字，说明安装成功。

但是，有些人就是打不开，原因很简单,80端口被占用了。 解决方法是：以管理员身份运行regedit打开键值:HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\services\HTTP在右边找到Start这一项，将其改为0重启系统，System进程不会占用80端口。

一切解决完毕后，打开conf文件夹，找到nginx.conf这个文件 ,找到

1
2
3
4
5
6

server {
	listen       80;
   server_name  localhost;
}

在404之前添加

1
2
3
4
location /api{
	rewrite ^.+api/?(.*)$ /$1 break;
	proxy_pass https://api.douban.com;
}

之后将静态 文件放入html文件中就可以进行跨域访问啦

比如我要请求的地址是 https://api.douban.com/v2/music/search?q=周杰伦
我只需要将地址改成 /api/v2/music/search?q=周杰伦 就可以啦

最后附上一些nginx常用的操作

  1. tasklist /fi “imagename eq nginx.exe 查看nginx进程
  2. nginx -s stop 强制关闭
  3. nginx -s quit 安全关闭
  4. nginx -s reload 改变配置文件的时候，重启nginx工作进程，来时配置文件生效
  5. nginx -s reopen 打开日志文件

好了,今天node/nginx的反向代理就先讨论到这里,如果文章由于我学识浅薄，导致您发现有严重谬误的地方，请一定在评论中指出，我会在第一时间修正我的博文，以避免误人子弟。

-------------本文结束感谢您的阅读-------------