来源 http://localhost:3000 已被 CORS 策略阻止：我的反应应用程序中的 Access-Control-Allow-Origin答案

【问题标题】：origin http://localhost:3000 has been blocked by CORS policy: The Access-Control-Allow-Origin In my react App来源 http://localhost:3000 已被 CORS 策略阻止：我的反应应用程序中的 Access-Control-Allow-Origin
【发布时间】：2022-01-06 20:52:13
【问题描述】：

我是 React 程序的初学者。我只是在使用 Laravel 和 React 构建一个小型 Web 应用程序。我突然得到错误我不知道我做错了什么。如果有人帮助我，我会很高兴你。下面是错误消息：

从源 http://localhost:3000 访问位于 http://127.0.0.1:8000/sanctum/csrf-cookie 的 XMLHttpRequest 已被 CORS 策略阻止：“Access-Control-Allow-Origin”标头的值 http://localhost:4200 不是等于提供的原点。

我正在尝试这样：

import React from 'react';
import { BrowserRouter as Router, Route, Switch} from 'react-router-dom';

import MasterLayout from './layouts/admin/MasterLayout';

import Home from './components/frontend/Home';
import Login from './components/frontend/auth/Login';
import Register from './components/frontend/auth/Register';
import axios from 'axios';

axios.defaults.baseURL = "http://127.0.0.1:8000";
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.headers.post['Accept'] = 'application/json';
axios.defaults.withCredentials = true;
    
function App() {
  return (
    <div className="App">
        <Router>
          <Switch>
            {/* Homepage */}
            <Route exact path="/" component={Home}/>

            {/* Auth Pages */}
            <Route path="/login" component={Login}/>
            <Route path="/register" component={Register}/>


            <Route path="/admin" name="Admin" render={(props) => <MasterLayout {...props} />} />

          </Switch>
        </Router>
    </div>
  );
}

export default App;

【问题讨论】：

标签： javascript reactjs laravel api postman

【解决方案1】：

CORS 是一种浏览器机制，它询问网络服务器是否愿意接受来自特定来源的请求。来源是你的主机名+端口，意思是localhost:3000、localhost:4200和localhost:8000都是不同的来源。

您可以在后端配置标头Access-Control-Allow-Origin 以接受来自'localhost:3000' 的请求，或者您可以在端口:4200 上启动您的react 应用程序，因为它已经被您的后端接受，或者您可以使用将从服务器端向后端发出请求的代理。

在生产环境中，后端和前端通常在同一个源上工作，因此代理是在开发过程中解决 CORS 问题的好方法。您还可以设置一些反向代理，例如 nginx，这样您的后端和前端都将位于同一来源。

【讨论】：