利用jsonp与代理服务器方案解决跨域问题

from functools import wraps
from flask import make_response


def allow_cross_domain(fun):
 @wraps(fun)
 def wrapper_fun(*args, **kwargs):
  rst = make_response(fun(*args, **kwargs))
  rst.headers['Access-Control-Allow-Origin'] = '*'
  rst.headers['Access-Control-Allow-Methods'] = 'PUT,GET,POST,DELETE'
  allow_headers = "Referer,Accept,Origin,User-Agent"
  rst.headers['Access-Control-Allow-Headers'] = allow_headers
  return rst
 return wrapper_fun

@app.route('/hosts/')
@allow_cross_domain
def domains():
 pass

//allow custom header and CORS
app.all('*',function (req, res, next) {
 res.header('Access-Control-Allow-Origin', '*');
 res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
 res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');

 if (req.method == 'OPTIONS') {
  res.send(200); /让options请求快速返回/
 }
 else {
  next();
 }
});

<script src="/UploadFiles/2021-04-02/jquery-2.2.4.min.js">

JSONP的原理就是利用浏览器对script标签没有同源限制，动态创建script标签，把需要请求的API放在script标签的src不受同源策略限制的特性来获得数据。
JSONP由回调函数(callback)和返回的数据(response)两部分组成。回调函数(callback)是当script创建src引入资源结束时调用，返回的数据(response)作为回调函数的第一个参数传入，在回调函数里即可保存获得的不同源数据。具体来看例子，我们在页面加载的时候获取数据，请求https://api.douban.com/v2/book/1220562：


// 在vue中需要将回调函数作为一个全局函数，否则在vue的生命周期中将获取不到这个回调函数
var d = null;
function handleResponse(response){
 console.log(response);
 d = response;
}

compiled: function() {
 var self = this;
 // jsonp
 var script = document.createElement("script"); // 动态创建标签
 script.src = "https://api.douban.com/v2/book/1220562"; // 创建的src就是请求的API，同时需要给这个src加上一个callback的query参数，参数名字就是你的回调函数名字
 document.body.appendChild(script, document.body.firstChild); // 插入新创建的script标签，这里类似Ajax发起请求
 
 // 轮询资源获取是否结束
 var timer = setInterval(function () {
 if (d) {
  console.log('pending')
  clearInterval(timer);
  self.data = d； // 将获取的数据赋值给数据model中
 }
 }, 500);
}


此时刷新页面，浏览器不再发出Access-Control-Allow-Origin的跨域错误，输出通过script获取到的数据:

JSONP的缺点


JSONP的缺点主要源自他的script引用资源方式，JSONP的缺点如下：

  
JSONP是通过script标签获取资源的，也就是说JSONP注定只能用GET的方式访问资源，GET以外的请求无法做到；
  
JSONP是通过src引用不同源的代码，如果其他域的代码存在恶意代码，那么这将造成严重的网络安全，如果需要跨域的服务器不足以信任，那么必须放弃JSONP；
  
要确定JSONP请求是否成功，需要启动一个计时器监测数据变动。

针对以上JSONP的缺点，如果需要进行改进，就需要使用代理服务器了。
代理服务器


代理服务器解决跨域的思路是利用代理服务器对浏览器页面的请求进行转发，因为同源策略的限制只存在在浏览器中，到了服务器端就没有这个限制了，常用的代理服务器方案有使用反向代理服务器以及服务器内转发，使用反向代理服务器的例子是Nginx的反向代理，通过修改Nginx的配置文件，将指定的不同源域名代理到当前服务器上，浏览器就可以正常访问不同源的资源了。还有个方案是不依赖反向代理服务器，在server端对不同源的API进行转发，本文主要对这种方法进行介绍。
首先代理服务器需要知道浏览器页面需要请求的API，因此，页面需要把API当做参数传递给代理服务器，形如：/proxy/:api，api参数是完整的API链接，如之前提到的豆瓣公共API：https://api.douban.com/v2/book/1220562。server端对API进行转发，在Python中可以使用requests发起HTTP请求，nodejs可以使用request，server端获得响应后将响应的结果返回给浏览器，具体的实现也很简单，以Flask为例：


@app.route('/proxy/<path:url>', methods=['GET'])
def getTasks(url):
 r = requests.get(url) ## 请求转发
 conver_r = eval(bytes.decode(r.content)) ##进行一些类型转化

 return json.dumps(conver_r), 200


在浏览器端发起请求的具体代码为：


self.$http.get('/proxy/https://api.douban.com/v2/book/1220562').then(function(res) {
 self.data = JSON.parse(res.data)
});


此时打开浏览器控制台，可以看到server转发的请求结果，跨域成功。

与JSONP相比代理服务器的优点


相比JSONP，使用代理服务器转发不同源API的优点如下：

  
资源获取是通过server端进行，可以根据需要转发的API选择使用GET以外的HTTP方法进行资源请求；
  
请求的资源需要经过server端转发到浏览器端，server端可以对资源进行处理，因此可以避免一些直接的恶意代码，比JSONP更安全；
  
浏览器页面正常使用Ajax请求数据，通过回调可以得知请求是否结束，不再需要使用计时器监测。

代理服务器的缺点


使用代理服务器的缺点是对不同源资源的转发请求，如果同时多个用户进行跨域请求，因为服务器内部需要进行额外的HTTP请求，那么服务器端的处理压力降会变大，从而导致阻塞等一系列性能问题，如需更好的方案，还是得使用Nginx等反向代理服务器进行端口代理处理。
总结
本文从实践的角度介绍了JSONP和代理服务器的处理跨域的做法，并对比了两种方案的优缺点，如果是一些安全要求性不高的场景，可以直接使用JSONP进行跨域请求，如果是需要额外的HTTP请求并且安全性要求较高，跨域请求还是从server端发起为佳，当然还有其他跨域方案，需要读者根据自身的能力和判断去舍取。
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。