原點 http://localhost:3000 已被 CORS 政策阻止：我的反應應用程序中的 Access-Control-Allow-Origin

Question

我是反應程序的初學者。 我只是在使用 Laravel 和 React 構建一個小型 web 應用程序。 我突然得到錯誤我不知道我做錯了什么。 如果有人幫助我，我會很高興你。 下面是錯誤消息：

Access to XMLHttpRequest at http://127.0.0.1:8000/sanctum/csrf-cookie from origin http://localhost:3000 has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 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;

Answer 1

CORS 是一種瀏覽器機制，詢問網絡服務器是否願意接受來自特定來源的請求。 Origin 是您的主機名 + 端口，這意味着localhost:3000 、 localhost:4200和localhost:8000都是不同的來源。

您可以在后端配置 header Access-Control-Allow-Origin以接受來自“localhost:3000”的請求，或者您可以在端口:4200上啟動您的反應應用程序，因為它已經被您的后端接受，或者您可以使用將從服務器端向后端發出請求的代理。

在生產環境中，您通常有后端和前端工作在同一來源，因此代理是解決開發過程中 CORS 問題的好方法。 您還可以設置一些反向代理，例如 nginx，這樣您的后端和前端都將位於同一來源。