zoukankan      html  css  js  c++  java
  • react跨域问题Django配置允许跨域No 'Access-Control-Allow-Origin' header is present on the requested resource',及其解决办法

    在做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

    # 跨域增加忽略
    CORS_ALLOW_CREDENTIALS = True # 指明在跨域访问中,后端是否支持对cookie的操作
    CORS_ORIGIN_ALLOW_ALL = True
    CORS_ORIGIN_WHITELIST = (
    'https://127.0.0.1:8080',
    'https://localhost:8080', #凡是出现在白名单中的域名,都可以访问后端接口
    )
    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',
    )

      至此解决

  • 相关阅读:
    Chrome开发者工具中Elements(元素)断点的用途
    最简单的SAP云平台开发教程
    Java实现 LeetCode 495 提莫攻击
    Java实现 LeetCode 494 目标和
    Java实现 LeetCode 494 目标和
    Java实现 LeetCode 494 目标和
    Java实现 LeetCode 493 翻转对
    Java实现 LeetCode 493 翻转对
    Java实现 LeetCode 493 翻转对
    Java实现 LeetCode 492 构造矩形
  • 原文地址:https://www.cnblogs.com/mryaohu/p/12483757.html
Copyright © 2011-2022 走看看