Question

我的reactjs应用程序适用于api。

我的api是用php语言和CodeIgniter框架编写的。

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

这是我的api：

innerText

这是我的reactjs代码：

`<?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");

    }

我将我的网站上传到子域名：

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

我的api写在shadyab.com域名。

这是我的htaccess文件：

test.shadyab.com

有人可以帮助我

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代码中，我建议将您的域名列入白名单，而不是让所有域名都像这样访问：

ID

您的反应代码中有一些事情需要更改：

public class Zoo
{
    public List<Area> AreaList {get; set;}
}

public class Area
{
    public List<Animal> AnimalList {get; set;}
}

public class Animal
{
    public List<int> Id {get; set;}
}

有关如何使用FormData的更多信息，请参阅this

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"

来自CORS预检频道的CORS标题“Access-Control-Allow-Headers”中缺少令牌“access-control-allow-origin” - 反应js

3 个答案: