ajax跨域-CORS

CORS：跨域资源共享，是一种跨域访问的W3C标准，它容许浏览器能够跨源服务器进行请求，可让ajax实现跨域访问。出现跨域问题的缘由是浏览器同源策略致使的，协议+域名+端口三者一致被认为是同源。网站出现同源策略问题，即：出现了未经容许的跨域请求。

 

同源策略下的限制：

• 没法获取非同源的Cookie、LocalStorage、SessionStorage等
• 没法获取非同源的dom
• 没法向非同源的服务器发送ajax请求

 

CORS原理: 浏览器与服务器经过一些HTTP协议头来作一些约定和限制，使用了额外的 HTTP 头来告诉浏览器，容许 Web 应用服务器进行跨域访问。从而使跨域数据传输得以安全进行。当一个资源从与该资源自己所在的服务器不一样的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。本质原理是在服务器的response header中加入“Access-Control-Allow-Origin: *”便可实现跨域访问。但注意并不必定是浏览器限制了发起跨站请求，也多是跨站请求能够正常发起，可是返回结果被浏览器拦截了。

 

 解决方式：

 

• JSONP方式
• CORS方式
• 代理请求方式

 

一、经过Ajax获取json数据时，存在跨域的限制。可是在Web页面上调用js的script脚本文件时却不受跨域的影响，因此可使用JSONP来实现跨域的传输。所以，咱们须要将Ajax调用中的dataType从JSON改成JSONP（相应的API也须要支持JSONP）格式。注意：JSONP只能用于GET请求。

 

2.一、Django

• 直接修改Django中的views.py文件，修改views.py中对应API的实现函数，添加响应头以此容许其余域经过Ajax请求数据：

 def myview(_request):  
    response = HttpResponse(json.dumps({"key": "value", "key2": "value"}))
    response["Access-Control-Allow-Origin"] = "*"  
    response["Access-Control-Allow-Methods"] = "POST, GET, OPTIONS"  
    response["Access-Control-Max-Age"] = "1000"  
    response["Access-Control-Allow-Headers"] = "*"  
    return response 

 

• 安装 django-cors-headers中间件：官方文档

 

2.2、Flask：安装 flask_cors 扩展，官方文档

 

三、代理请求方式

1. 接受客户端的`请求` 。
2. 将 `请求` 转发给服务器。
3. 拿到服务器 `响应的数据`。
4. 将 `响应` 转发给客户端。