missing token ‘access-control-allow-origin’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel - react js

问题

My reactjs application works with api.

My api is written in php language and CodeIgniter framework.

https://github.com/chriskacerguis/codeigniter-restserver

this is my api:

`<?php
defined('BASEPATH') OR exit('No direct script access allowed');
require APPPATH . '/libraries/REST_Controller.php';
 class Api extends REST_Controller {
    public function __construct($config = 'rest')
    {

        parent::__construct($config);

        $this->load->model('m_user');
        $this->load->model('m_cart');

        header('Access-Control-Allow-Origin: *');
        header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Authorization");
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");

    }

this is my reactjs code:

function getAll(city) {

    const formData = {};
    formData['city'] = city;


    const requestOptions = {
        method: 'POST',
        headers: { 'Content-Type': 'multipart/form-data',
                   'Access-Control-Allow-Origin': '*'},
        body: JSON.stringify(formData)
    };


    return fetch(BASE_URL+serverConstants.COUPONS_POST_REQUEST, requestOptions)
        .then(response => {
          console.log("======");
          console.log(response);
            if (!response.ok) {
                return Promise.reject(response.statusText);
            }

            return response.json();
        })

I uploaded my site on a sub-domain:

test.shadyab.com

my api write on shadyab.com domain.

Here is my htaccess file:

AddType application/x-httpd-php56 php56 php

php_flag  log_errors on
php_flag  display_errors on
#php_value error_reporting 8
php_value error_reporting E_ALL
php_value error_log  /home/shadyabc/public_html/error_log2

<IfModule mod_rewrite.c>

RewriteEngine on
RewriteCond %{HTTP_HOST} ^shadyab.com$ [NC]
RewriteRule ^(.*)$ http://www.shadyab.com/$1 [R=301,L]

RewriteCond $1 !^(index\.php|resources|robots\.txt)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L,QSA] 
RewriteCond %{REQUEST_METHOD} OPTIONS RewriteRule ^(.*)$ $1 [R=200,L]



</IfModule>

order allow,deny
allow from all

RewriteCond %{HTTP_HOST} ^shadyab\.ir$ [OR]
RewriteCond %{HTTP_HOST} ^www\.shadyab\.ir$
RewriteRule ^/?$ "http\:\/\/www\.shadyab\.com" [R=301,L]


<Files 403.shtml>
order allow,deny
allow from all
</Files>

deny from 72.52.124.58

Can someone please help me

回答1:

headers: { 'Content-Type': 'multipart/form-data',
              'Access-Control-Allow-Origin': '*'},

Access-Control-Allow-Origin is a not a header that you are allowed to send in a cross-origin Ajax request by default.

You need to explicit permission from the server in order to send it.

That is what the error message is telling you.

However: Access-Control-Allow-Origin is a response header. It has no place being in your request in the first case.

Delete it from your client-side code.

回答2:

To allow CORS requests, Access-Control-Allow-Origin header has already been set by your api code.

You should not send Access-Control-Allow-Origin header in your ajax call. Its a response header

Also, in your api code, I would recommend whitelisting your domain instead of allowing all domains to access it like this:

header('Access-Control-Allow-Origin': '*.shadyab.com');

There are few things that need to be changed in your react code:

function getAll(city) {
// Create a new FormData object and append the data to it
const formData = new FormData();
formData.append('city', city);

const requestOptions = {
    method: 'POST',
    // If your using FormData, it automatically sets the content-type 
    // as multipart/form-data. So, you do not need to send the header.
    body: formData
};
// rest of your code
}

For more info on how to use FormData, refer to this

回答3:

You can use .htaccess file to set cross domain origin rule. See below code

# Cross domain access
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

来源：https://stackoverflow.com/questions/50039254/missing-token-access-control-allow-origin-in-cors-header-access-control-allow

标签

php

reactjs

codeigniter