Django 多方式实现跨域访问

一、什么是跨域

1.1 跨越介绍

跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制。 这里说明一下,无法跨域是浏览器对于用户安全的考虑,如果自己写个没有同源策略的浏览器,完全不用考虑跨域问题了。
域可以理解为:协议 + 域名 + 端口号

  • 在前后端不分离的项目中,前端使用ajax发起请求时,前端发起请求的域与后端定义API的域一致,故不会存在跨域问题
  • 在前后端分离的项目中,前端使用ajax或者axios发起请求,前后端各自运行在自己的域下,所以在发起请求的时候就会造成跨域,比如前端使用脚手架创建,运行在http://127.0.0.1:8080 后端运行在http://127.0.0.1:8000 端口,当前端发起请求时,因为域(端口不一致)不同,就会造成跨域,浏览器便会阻止该请求。

1.2 跨域分类

跨域请求分为2种,一种是简单请求,一种是复杂请求。

  • 简单请求
只要同时满足以下两大条件,就属于简单请求
HTTP 方法是下列之一
 	- HEAD
	- GET
	- POST 

HTTP 头信息不超出以下几种字段
	- Accept
	- Accept-Language
	- Content-Language
	- Last-Event-ID
	- Content-Type 只能是下列中的一个类型
	 		application/x-www-from-urlencoded
	    	multipart/form-data
	    	text/plain

任何一个不满足上述要求的请求,即会被认为是复杂请求
复杂请求会先发出一个预请求,我们也叫预检,OPTIONS请求

二、同源策略

浏览器只阻止表单以及ajax请求,并不会阻止src请求,所以我们的cdn,图片等src请求都可以发~~

2.1 Ajax测试

当我们向后端发起GET请求时,后端没有做跨域访问。

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="https://unpkg.com/axios/dist/axios.min.js">script>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
	<title>跨域请求测试title>
head>
	
<body>
	<div id="app">
		<button  @click="Send">发送请求button>
	div>
body>
<script>
	new Vue({
		el:"#app",
		methods:{
			Send(){
				axios.get('http://127.0.0.1:8000/api/test/')
				  .then(function (response) {
				    // 处理成功情况
				    console.log(response);
				  })
				  .catch(function (error) {
				    // 处理错误情况
				    console.log(error);
				  })
			}
		}
	})
script>
html>

浏览器给出提示。从origin 'null’访问’http://127.0.0.1:8000/api/test/'的XMLHttpRequest已经被CORS[跨域资源共享]策略阻止:没有’Access- control - allow - origin '头在请求的资源上存在。
Django 多方式实现跨域访问_第1张图片
我们在后端也发现,请求已经进来了,并成功返回了。所以数据被浏览器给劫持了
Django 多方式实现跨域访问_第2张图片

2.2 src 测试

当我们使用img script 标签的src来发起一个GET请求,会触发CORB(Cross-Origin Read Blocking )跨域读取阻塞。
当跨域请求回来的数据 MIME type 同跨域标签应有的 MIME 类型不匹配时,浏览器会启动 CORB 保护数据不被泄漏,被保护的数据类型只有 html xmljson。很明显

你可能感兴趣的:(Python,django,前端,javascript)