Question

我正在努力提出'POST'请求，但我遇到了一些关于CORS的问题。我只是按照控制台说的那样并在服务器端 [ PHP ]和客户端中修复它们一切正常状态为200但状态400显示

登录：1无法加载http://192.168.0.102/API/：否请求中存在“Access-Control-Allow-Origin”标头资源。因此不允许来源“http://localhost:3000” 访问。 响应的HTTP状态代码为400 。如果是不透明的回应满足您的需求，将请求的模式设置为'no-cors'来获取 CORS禁用的资源。

我尝试添加mode: 'no-cors'，但这不起作用

Uncaught（在promise中）SyntaxError：意外的输入结束

服务器端'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 /动作/ 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 /组件/ 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错误请求时才会出现此错误

如果我遗漏任何信息，请告诉我。

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

非常感谢你！

Answer 1

问题在于你正在提出的要求！

当您发出错误请求时，服务器不会设置＆＃39; Access-Control-Allow-Origin＆＃39; 标头，它只会拒绝它，从而导致CORS错误。

修复错误的请求原因，通常缺少参数，你很高兴!!! ...

Answer 2

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

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

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

Answer 3

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

所以你应该做的是错误响应，因为你说它使用200状态代码。

您应该在抛出异常时设置标题。

item = load '/user/item.txt' USING PigStorage('|') AS (load_id:chararray, record_type:chararray, geocode:chararray);

newitem = FOREACH item GENERATE load_id, record_type,
(CASE (SUBSTRING(geocode,0,2))
 WHEN 00-51 THEN 'CONCAT(01,CONCAT(geocode,00))'
 WHEN 70 THEN 'CONCAT(03,CONCAT(geocode,00))'
 WHEN 61-78 THEN 'CONCAT(04,CONCAT(geocode,00))'
 ELSE 'CONCAT(00,CONCAT(geocode,00))'
 END) AS vertex_code;

DUMP newitem;

CORS错误只有400个错误请求反应获取请求

3 个答案: