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

Posted 2023-03-04

【中文标题】CORS 错误仅与 400 错误请求反应获取请求

【英文标题】：CORS Errors only with 400 bad request react fetch request

【发布时间】：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 错误请求，因为我想显示错误请求的响应消息

【参考方案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());
                             
    ;
;