CORS 错误仅与 400 错误请求反应获取请求答案

【问题标题】：CORS Errors only with 400 bad request react fetch requestCORS 错误仅与 400 错误请求反应获取请求
【发布时间】：2018-07-08 01:20:42
【问题描述】：

我正在尝试发出 'POST' 请求做出反应，但我遇到了一些关于 CORS 的问题。我只是按照控制台所说的并在 服务器端 [这是PHP] 和 客户端 修复它们，当状态时一切正常是 200 但当状态为 400 时它显示

login:1 加载失败http://192.168.0.102/API/: 否请求中存在“Access-Control-Allow-Origin”标头资源。因此不允许使用原点“http://localhost:3000” 使用权。 响应的 HTTP 状态代码为 400。如果一个不透明的响应满足您的需求，将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

我已尝试添加 mode: 'no-cors'，但它显示无效

Uncaught (in promise) SyntaxError: Unexpected end of input

服务器端“PHP Slimframework”标头：

$app->add(function ($req, $res, $next) {
    $response = $next($req, $res);
    return $response
        ->withHeader('Access-Control-Allow-Origin', 'http://localhost:3000')
        ->withHeader('Origin', 'http://localhost:3000')
        ->withHeader('Access-Control-Allow-Headers', 'Origin, Content-Type, Accept, X-Auth-Token')
        ->withHeader('Access-Control-Allow-Credentials', 'true')
        ->withHeader('Access-Control-Request-Headers', 'Origin, X-Custom-Header, X-Requested-With, Authorization, Content-Type, Accept')
        ->withHeader('Access-Control-Expose-Headers', 'Content-Length, X-Kuma-Revision')
        ->withHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS');
});

客户端

src/actions/userActions.js

export function loginUsers(userData) {
    return new Promise((resolve, reject) =>{
            fetch(URL,{
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                },
                credentials: 'include',
                //mode: 'no-cors', // if it's on it will show Uncaught (in promise) SyntaxError: Unexpected end of input
                body: JSON.stringify(userData),
            })
                .then((response) => response.json())
                .then((responseJson) =>{
                    resolve(responseJson);
                })
                .catch((error) =>{
                    reject(error)
                })
        })
}

src/components/layout.js

import React, {Component} from 'react';
import { loginUsers } from '../actions/usersAction';

class Layout extends Component {
    constructor(props){
        super(props);
        this.state = {
            username: '',
            password: '',
        };
        this.handleLogin = this.handleLogin.bind(this);
        this.onChange = this.onChange.bind(this);
    }

    onChange(e){
        this.setState({ [e.target.name] : e.target.value });
    }


handleLogin(){
        if (this.state.username && this.state.password){
            loginUsers(this.state).then((result) =>{
                let responseJSON = result;
                console.log(responseJSON);
            });
        }
    }

    render() {
        return (
            <div className="App">
                <input type="text" onChange={this.onChange} name="username" />
                <input type="password" onChange={this.onChange} name="password" />
                <button onClick={this.handleLogin}>Sign in</button>
            </div>
        );
    }
}




export default Layout;

此处的屏幕截图仅在错误请求（如 400）时出现此错误

如果我错过任何信息，请告诉我。

如果已经有人问过这个问题，如果您能指出我正确的方向，我将不胜感激。

非常感谢！

【问题讨论】：

你的目的地没有端口？任何重定向？
首先找出是什么让您的 API 响应 400 ...
@Black.Jack 不，正如您在我的布局组件中看到的那样，没有重定向我只是控制台响应错误和成功的结果。如果我发出成功请求，它将正常工作并会在控制台中显示响应，但是当状态为 400 时，我会收到该错误
@CBroe 我的意思是执行 400 错误请求，因为我想显示错误请求的响应消息

标签： javascript php reactjs cors slim

【解决方案1】：

问题在于您提出的请求！

当您发出错误的请求时，服务器不会设置 'Access-Control-Allow-Origin' 标头，它只是拒绝它，进而导致 CORS 错误。

修复错误的请求原因，通常缺少参数，你很好！！！

【讨论】：

好的，我怎样才能为错误的请求应用相同的标头。此外，错误的请求是错误的登录详细信息，因此应该是 400。
如果在您的请求生命周期中未处理异常，您将无法显示 CORS 标头。因此，只要你能处理它们，你应该能够打入你的 CORS 中间件
@FriedrichRoell 感谢您的回复，我注意到问题仅在于我抛出异常时。它与 http_error_code 无关。顺便说一句，我正在使用苗条的框架。有没有办法发送带有异常的标头？

【解决方案2】：

您需要在对象标头中添加键 Access-Control-Allow-Origin，其值为 http://localhost:3000（您的前端 URL），或者删除

-> withHeader('Access-Control-Allow-Origin', 'http://localhost:3000')

在您的后端（但这是一个安全问题）

【讨论】：

我已经在后端添加了它，但在执行 400 bad request 时仍然遇到同样的错误。

【解决方案3】：

问题在于服务器端的“php异常”，当您抛出错误时，标头未设置。

你必须在抛出异常时设置一些标题：

$c = new \Slim\Container();
$c['errorHandler'] = function ($c) {
    return function ($request, $response, $exception) use ($c) {
        return $c['response']->withStatus(500)
    ->withHeader('Access-Control-Allow-Origin', 'http://localhost:3000')
    ->withHeader('Access-Control-Allow-Headers', 'Origin, Content-Type, Accept, X-Auth-Token')
    ->withHeader('Access-Control-Allow-Credentials', 'true')
    ->withHeader('Access-Control-Expose-Headers', 'Content-Length, X-Kuma-Revision')
    ->withHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS')
    ->write(exception->getMessage());
                             
    };
};

【讨论】：