我在React中编写axios post方法并添加Access-Control-Allow-Origin，但请求无法正常工作，并且响应我cors原点错误

Question

I write axios post method in React and add Access-Control-Allow-Origin but the request is not working and send this response:

Access to XMLHttpRequest at ' https://api.aaaa.com/aaa/login/ ' from origin ' http://0.0.0.0:3000 ' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

axios.post('https://api.aaa.com/aaa/login/', userlogin , {
            headers :{
                'Content-Type': 'application/json',
                'Access-Control-Allow-Origin': 'http://api.aaa.com',
                'Access-Control-Allow-Credentials': true,
            }
        })

In Backend Code (Django), I add corsheaders Package and CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = [' http://0.0.0.0:3000/ ']

How can I fix this error?

Answer 1

CROS has to be added from webservice , for example if the api( https://api.aaaa.com/aaa/login/ ) is written in php then in php script add below headers :

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: X-Requested-With, Content-Type, Origin, Cache-Control, Pragma, Authorization, Accept, Accept-Encoding");

For Django:

pip install django-cors-headers

and then add it to your installed apps:

INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)

You will also need to add a middleware class to listen in on responses:

MIDDLEWARE_CLASSES = (
    ...
    'corsheaders.middleware.CorsMiddleware',  
    'django.middleware.common.CommonMiddleware',  
    ...
)

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = (
    'localhost:3030',
)
CORS_ORIGIN_REGEX_WHITELIST = (
    'localhost:3030',
)