标签：Control requested const 跨域 middleware django CORS options

在做Scratch开发配置服务器接口时，遇到跨域问题。

控制台报错：

No 'Access-Control-Allow-Origin' header is present on the requested resource'，

以及

Axios api call - Failed to load ,Response for preflight is invalid (redirect)

Failed to load Response for preflight has invalid HTTP status code 403

问题导致接口转发，数据无法传到目标服务接口如图，下方数据为空：

总结解决方法如下：

1. 修改本地电脑hosts文件

    百度一下，不太推荐此办法

2. 请求的headers添加：

options.mode = 'no-cors'

Header: {'Access-Control-Allow-Origin': '*', 'Content-Type': 'application/json'},
完整请求：

const commonUrl = 'http://www.X.com:8001';
const options = {};
const url = commonUrl + '/Login/';
const data = {
    'password': '',
    'username': '',
    'tel': ''
}
options.method = 'post'
options.mode = 'no-cors'
options.body = JSON.stringify(data)
options.headers = {
    'Content-Type': 'application/json'
}
return fetch(url,options,{credentials:'include'})
    .then(checkStatus)
    .then(parseJSON)
    .then((res) => {
       回调逻辑
    })
    .catch(err=>({err}))

3. 后台接口配置允许跨域：

我是用的是Django，下面是Django配置跨域：
（1）使用 django-cors-headers 组件

pip install django-cors-headers

　　settings.py设置：

INSTALLED_APPS = [

    'corsheaders'
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]






# 底部添加：
# 跨域增加忽略
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',
)

　　至此解决

标签：Control,requested,const,跨域,middleware,django,CORS,options
来源： https://www.cnblogs.com/mryaohu/p/12483757.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。