proxy跨域

跨域

浏览器访问非同源的网址时,会被限制访问,出现跨域问题.

解决方案:

1.response 添加 header(CORS)

2.JSONP 方式

3.全局对象+iframe

(1)document.domain+iframe的设置 (只有在主域相同的时候才能使用该方法):

设置document.domain值相同即可访问

(2)HTML5的postMessage(window.postMessage):

监听message事件,获取data

(3)使用window.name来进行跨域:

源页面的数据赋值给window.name、修改src使其与为请求页面同源页(window.name不变)、请求页拿到同源页的window.name(数据)

4.代理(proxy)

原理

服务器访问服务器没有跨域问题.所以,我们的做法是利用中间的代理浏览器向目标浏览器发请求.

代理方式配置

1.http-proxy-middleware

如下:利用node.js里面的express框架创建了一个服务器,并向目标服务器发送请求

 1 // 引用依赖
 2 var express = require('express');
 3 var proxy = require('http-proxy-middleware');
 4 
 5 // proxy 中间件的选择项
 6 var options = {
 7         target: 'http://www.example.org', // 目标服务器 host
 8         changeOrigin: true,               // 默认false，是否需要改变原始主机头为目标URL
 9         ws: true,                         // 是否代理websockets
10         pathRewrite: {
11             '^/api/old-path' : '/api/new-path',     // 重写请求，比如我们源访问的是api/old-path，那么请求会被解析为/api/new-path
12             '^/api/remove/path' : '/path'           // 同上
13         },
14         router: {
15             // 如果请求主机 == 'dev.localhost:3000',
16             // 重写目标服务器 'http://www.example.org' 为 'http://localhost:8000'
17             'dev.localhost:3000' : 'http://localhost:8000'
18         }
19     };
20 
21 // 创建代理
22 var exampleProxy = proxy(options);
23 
24 // 使用代理
25 var app = express();
26     app.use('/api', exampleProxy);//注意,这里的"/api"不是必须写"/api"的,而是根据你请求的路径写的
27     app.listen(3000);

2.webpack或者vue-cli之类的devSever

同样是利用node.js创建一个本地服务器进行代理,只是配置方式有些微不同,更为简洁.以webpack.config.js的配置为例


devServer:{

proxyTable: {//高版本的是"proxy"
// 当你请求是以/api开头的接口，则我帮你代理访问到https://api.douban.com
      '/api/*': {
        target: 'https://api.douban.com', // 你接口的域名
        secure: false, // 如果是https接口，需要配置这个参数
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置

        pathRewrite: {
            '^/api/old-path' : '/api/new-path',     // 重写请求，比如我们源访问的是api/old-path，那么请求会被解析为/api/new-path
           '^/api/remove/path' : '/path'           // 同上
 }

  } }
}

3.nginx代理

简而言之就是用c语言创建一个服务器,和上面两张方式不一样.

4.whistle等调试工具

也是基于node实现的,功能复杂,操作简单.

总结:

代理跨域的主要方式是利用服务器请求服务器的方式避过跨域问题来实现的.大概的流程:浏览器===>代理服务器===>目标服务器.

主要手段两种:1.项目中的代码实现,利用node创建服务器.因为有代码在,所以就算不在本机上运行项目也可以实现跨域.

2.工具.以上提到的工具都是在本地手动创建一个服务器,然后再运行代码.所以当代码不在本地运行时还是会跨域,要重新配置.工具跨域更适合调试.

原理

代理方式配置

1.http-proxy-middleware

总结:

猜你喜欢