三、服务端解决跨域请求
上述我们介绍了如何在客户端解决跨域请求问题,同样我们可以在服务端进行设置处理,是否还记得在我们不做任何处理的时候,跨域请求时候浏览器给我们报的错误不?如下,翻译过来就是因为相应头没有指定Access-Control-Allow-Origin所允许原始的请求路径,因此原始请求路径http://127.0.0.1:8001不被允许访问。
基于上述的原因解释,我们只需要在响应的内容加入上述这样的授权字段,便可解决,实例如下:
项目1客户端请求代码:(路径为:http://127.0.0.1:8001)
<script> $(".ajax_btn").click(function () { $.ajax({ url:"http://127.0.0.1:8002/send_ajax/", success:function (data) { alert(data); console.log(data) } }) }); </script>
项目2服务端被请求的路径:
def send_ajax(request): import json dic={"k1":"v1"} print("ok") response=HttpResponse(json.dumps(dic)) response["Access-Control-Allow-Origin"]="http://127.0.0.1:8001" return response
如上方式,在服务端相应内容中加入response["Access-Control-Allow-Origin"]="http://127.0.0.1:8001"字段后,http://127.0.0.1:8001路径就可以跨域请求此路径下的内容,如果将其设置成response["Access-Control-Allow-Origin"]="*"表示所有的客户端都可以请求此服务器下此路径。
上述这种方式虽然在服务端解决了跨域请求的问题,但是通过上述设置方式,显然不灵活,我们应该访问路径的实际情况进行判断,然后再决定要不要给其跨域返回内容,解决办法可以将服务器代码改为如下:
def send_ajax(request): import json dic={"k1":"v1"} HttpOrigins=["http://127.0.0.1:8001","http://127.0.0.1:8003","http://127.0.0.1:8005"] print(request.META.get("HTTP_ORIGIN")) #可以取得请求路径的origin HttpOrigin=request.META.get("HTTP_ORIGIN") if HttpOrigin in HttpOrigins: response=HttpResponse(json.dumps(dic)) response["Access-Control-Allow-Origin"]=HttpOrigin return response
PS:
上述讲述的都是基于get请求的情况,假如我们在客户端利用PUT形式进行请求,因为put请求属于上传文件的请求方式,而http协议对此请求方式未做验证,即请求便能成功,显然不合理,所以浏览器给给其增加了预检,即put请求提交时,客户端实际提交的请求方式为OPTIONS,只有在服务端对其进行了验证后,才会继续提交正真put请求。上述的服务端跨域put形式请求可以改写为如下:
def send_ajax(request): if request.method=="OPTIONS":#预检 response=HttpResponse() response["Access-Control-Allow-Methods"]="PUT" response["Access-Control-Allow-Origin"] = "http://127.0.0.1:8001" return response elif request.method=="PUT": import json dic = {"k1": "v1"} response = HttpResponse(json.dumps(dic)) response["Access-Control-Allow-Origin"] = "http://127.0.0.1:8001" return response