django跨域问题

跨域报错：Access to XMLHttpRequest at 'http://127.0.0.1:8000/' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

1、为什么会出现跨域
出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能。它会阻止一个域的javascript脚本和另外一个域的内容进行交互。简单来说就是 A 网站的 javascript 代码试图访问 B 网站，包括提交内容和获取内容。这显然是不安全的。为此，浏览器的鼻祖：网景（Netscape）公司提出了优秀的解决方案：著名的浏览器同源策略。现在所有支持JavaScript的浏览器都会使用这个策略所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

2、什么是跨域
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

当前页面url    被请求页面url    是否跨域    原因
http://www.baidu.com/    http://www.baidu.com/index.html    否    同源（协议、域名、端口号相同）
http://www.baidu.com/    https://www.baidu.com/index.html    跨域    协议不同（http/https）
http://www.baidu.com/    http://www.google.com/    跨域    主域名不同（test/baidu）
http://www.baidu.com/    http://blog.baidu.com/    跨域    子域名不同（www/blog）
http://www.baidu.com:8080/    http://www.baidu.com:8888/    跨域    端口号不同（8080/7001）
 

方案一

  django实现跨域

跨域（第二种方法）
用Django的第三方包 django-cors-headers 来解决跨域问题
操作步骤：
1.pip install django-cors-headers
2.在settings.py中添加'corsheaders.middleware.CorsMiddleware',在SessionMiddleware和CommonMiddleware的中间
2.1.在INSTALLED_APPS里添加“corsheaders”
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'corsheaders',#新加
]
2.2.在MIDDLEWARE添加
‘corsheaders.middleware.CorsMiddleware’, ‘django.middleware.common.CommonMiddleware’
MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
     'corsheaders.middleware.CorsMiddleware',#新加
     'django.middleware.common.CommonMiddleware',#新加
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
 
]
2.3.在sitting.py底部添加
#跨域增加忽略
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = ()
 # 对应的发送的请求的跨域
CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
    'VIEW',
)
 
CORS_ALLOW_HEADERS = (
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
)


3.在settings.py中添加CORS_ORIGIN_ALLOW_ALL = True

方案二

一、 Access-Control-Allow-Origin

方法1：使用 response.setHeader(“Access-Control-Allow-Origin”,"*"); 可以解决

# json序列化+响应参数 

def new(request):
	 data_list = {'username':'xiaoming', 'age':18, 'gender':1}
	 response = HttpResponse(json.dumps([data_list]))
	 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发布应用后其他前端无法使用iframe调用页面
     出现的情况：Refused to display 'http://127.0.0.1:8000/polls/' in a frame because it set 'X-Frame-Options' to 'sameorigin'
     解决方法：在settings.py中添加
     X_FRAME_OPTIONS = 'ALLOWALL'

    django中，我们经常要允许跨域请求和X-frame，这时我们不必一定要用第三方的组件，而是自定义一个中间键即可。

from django.utils.deprecation import MiddlewareMixin

from django.http import HttpResponse

class LoginToken(MiddlewareMixin):

    def process_response(self,request,response):

        # 添加响应头，允许跨域

        response['Access-Control-Allow-Origin'] = "*"

        response['Access-Control-Allow-Headers'] = "*"

        response['Access-Control-Expose-Headers'] = "*"

        response['Access-Control-Allow-Methods'] = "*"

        response['Access-Control-Allow-Credentials']="true"

        # 允许X-frame

        response['X-Frame-Options'] = 'ALLOWALL'

        return response

axios跨域

axios完整写法：
this.axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
}).then((res)=>{
      console.log(res)
}).catch((error)=>{
      console.log(error)
 });
post请求
this.axios.post('',{}).then((res)=>{}).catch((error)=>{})
get请求
axios.get('/user?ID=12345')
.then((response)=> {
  console.log(response);
})
.catch((error)=> {
  console.log(error);
});

在main.js里配置，该两行
import axios from 'axios'
Vue.prototype.axios = axios   //其它组件可以使用this.axios