在CORS預檢通道中的CORS標頭'Access-Control-Allow-Headers'中缺少令牌'access-control-allow-origin'-react js

Question

我的reactjs應用程序可以使用api。

我的api是用php語言和CodeIgniter框架編寫的。

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

這是我的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");

    }

這是我的reactjs代碼：

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();
        })

我將網站上傳到了一個子域：

test.shadyab.com

我的api寫在shadyab.com域上。

這是我的htaccess文件：

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

有人可以幫幫我嗎

Answer 1

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

默認情況下， Access-Control-Allow-Origin不是允許您在跨域Ajax請求中發送的標頭。

您需要服務器的顯式許可才能發送它。

這就是錯誤消息告訴您的內容。

但是： Access-Control-Allow-Origin是響應頭。 在第一種情況下，它在您的請求中沒有位置。

從客戶端代碼中將其刪除。

Answer 2

要允許CORS請求，您的api代碼已經設置了Access-Control-Allow-Origin標頭。

您不應該在ajax調用中發送Access-Control-Allow-Origin標頭。 它是一個響應頭

另外，在您的api代碼中，我建議將您的域列入白名單，而不是像這樣允許所有域訪問它：

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

在您的反應代碼中，有幾件事需要更改：

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
}

有關如何使用FormData的更多信息，請參考此

Answer 3

您可以使用.htaccess文件設置跨域來源規則。 見下面的代碼

# 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"