TypeError：“尝试获取资源时的NetworkError。”

Question

我发现了很多与我的问题类似的问题，但我没有得到解决方案，这就是为什么我在这里问。

我刚刚开始学习使用React进行前端开发。我已经为在不同端口运行的前端和后端制作了单独的应用程序。

后端：Laravel框架应用程序运行于incomeexpense.stacklearning.com/

前端：在localhost:3000/运行的React应用程序

我有一张这样的表格：

import React,{Component} from 'react';

export default class Register extends Component{
constructor(props){
    super(props);

    this.state = {
        name: '',
        email: '',
        password: '',
        confirm_password: ''
    }
}

updateInput = (event) =>{
    const name = event.target.name;
    const value = event.target.value;

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

handleSubmit = (event)=>{
    event.preventDefault();
    fetch('http://incomeexpense.stacklearning.com/api/users', {
        method: 'POST',
        body: JSON.stringify({
            name: this.state.name,
            email: this.state.email,
            password: this.state.password,
            confirm_password: this.state.confirm_password
        }),
        headers: {
            "Content-Type": "application/json",
            "Origin": "localhost:3000",
        }
    }).then(function (response) {
        console.log(response);
    },function (error) {
        console.log(error);
    });
}

render(){
    return(
        <div className="limiter">
            <div className="container-login100">
                <div className="wrap-login100 p-l-85 p-r-85 p-t-55 p-b-55">
                    <form className="login100-form validate-form flex-sb flex-w" onSubmit={this.handleSubmit}>
                        <span className="login100-form-title p-b-32">
                            Sign Up
                        </span>
                        <span className="txt1 p-b-11">
                            Name
                        </span>
                        <div className="wrap-input100 validate-input m-b-36" >
                            <input className="input100" type="text" name="name" value={this.state.name} onChange={this.updateInput}/>
                            <span className="focus-input100"></span>
                        </div>
                        <span className="txt1 p-b-11">
                            Email
                        </span>
                        <div className="wrap-input100 validate-input m-b-36">
                            <input className="input100" type="text" name="email" value={this.state.email} onChange={this.updateInput}/>
                            <span className="focus-input100"></span>
                        </div>
                        <span className="txt1 p-b-11">
                            Password
                        </span>
                        <div className="wrap-input100 validate-input m-b-36">
                            <input className="input100" type="password" name="password" value={this.state.password} onChange={this.updateInput}/>
                            <span className="focus-input100"></span>
                        </div>
                        <span className="txt1 p-b-11">
                            Confirm Password
                        </span>
                        <div className="wrap-input100 validate-input m-b-18">
                            <input className="input100" type="password" name="confirm_password" value={this.state.confirm_password} onChange={this.updateInput}/>
                            <span className="focus-input100"></span>
                        </div>
                        <div className="container-login100-form-btn">
                            <button className="login100-form-btn">
                                Register
                            </button>
                        </div>
                        <div className="flex-sb-m w-full p-b-48 m-t-60 text-center">
                            <label>
                                Already have an account ?
                                <a className="txt3 m-l-5" href="/login">
                                    Sign In Now
                                </a>
                            </label>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    );
}
}

我一直在沿着路线走，

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

Route::post('users',array( 'middleware'=>'cors','uses'=>'Auth\RegisterController@registerUser'));
Route::get('users',array( 'middleware'=>'cors','uses'=>'Auth\RegisterController@getUsers'));

这里是 CORS 中间件，

<?php

namespace App\Http\Middleware;

use Closure;

class CORS
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        header('Access-Control-Allow-Origin: http://localhost:3000/');
        header('Access-Control-Allow-Credentials: true');

        // ALLOW OPTIONS METHOD
        $headers = [
            'Access-Control-Allow-Methods'=> 'POST, GET, OPTIONS, PUT, DELETE',
            'Access-Control-Allow-Headers'=> 'Content-Type, X-Auth-Token, Origin'
        ];

        if($request->getMethod() == "OPTIONS") {
            // The client-side application can set only headers allowed in Access-Control-Allow-Headers
            return Response::make('OK', 200, $headers);
        }

        $response = $next($request);
        foreach($headers as $key => $value)
            $response->header($key, $value);

        return $next($request);
    }
}

最后这里是用户创建函数

protected function create(array $data)
{
    return User::create([
        'name' => $data['name'],
        'email' => $data['email'],
        'password' => bcrypt($data['password']),
    ]);
}

protected function registerUser(Request $request)
{
    $data = $request->all();
    return response()->json($this->create($data));
}

当我从反应应用程序发送帖子请求时，控制台显示以下错误

跨源请求已阻止：同源策略不允许读取 http://incomeexpense.stacklearning.com/api/users 的远程资源。（原因：缺少 CORS 标头“访问控制-允许-源”）。

TypeError：“尝试获取资源时的网络错误。注册.js：39 跨域请求被阻止：

同源策略不允许读取http://incomeexpense.stacklearning.com/api/users.的远程资源(原因:CORS请求不成功)。

我知道这个错误是由于不同的域和浏览器阻止资源访问不同的域。

我只想知道我需要做些什么在前面和后面把事情做好

PS：后端代码在从邮递员发送请求时运行良好。

Answer 1

URI模式不匹配

在获取请求的标头接口中设置的Origin请求标头包含主机：localhost:3000。在CORS中间件中配置的Access-Control-Allow-Origin CORS标头包含主机：http://localhost:3000/。定义的URI方案/主机/端口元组必须在获取请求和CORS中间件中完全匹配。

将两个URL都更改为< code > http://localhost:3000

请参见： 面向开发人员的 Fetch Spec、CORS Spec 和 CORS

铬虫

请注意，Chrome不支持对本地主机的CORS请求。你可以在这里找到记录在案的Chrome bug。如果需要，bug中列出了一些解决方法。