[英]origin http://localhost:3000 has been blocked by CORS policy: The Access-Control-Allow-Origin In my react App
I am beginner of react program.我是反应程序的初学者。 I am just building one small web app using Laravel and React.我只是在使用 Laravel 和 React 构建一个小型 web 应用程序。 I suddenly got error I don't know what I did wrong.我突然得到错误我不知道我做错了什么。 If anyone help me I will be glade to you.如果有人帮助我,我会很高兴你。 Bellow the error message:下面是错误消息:
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 that is not equal to the supplied origin. 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 不等于提供的来源。
I am trying like this way:我正在尝试这样:
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;
CORS is a browser mechanism that asks webserver if it is willing to accept request from specific origin. CORS 是一种浏览器机制,询问网络服务器是否愿意接受来自特定来源的请求。 Origin is your hostname + port, meaning localhost:3000
, localhost:4200
and localhost:8000
are all different origins. Origin 是您的主机名 + 端口,这意味着localhost:3000
、 localhost:4200
和localhost:8000
都是不同的来源。
You can either configure header Access-Control-Allow-Origin
on your backend side to accept requests from 'localhost:3000', or you can start your react application on port :4200
, since it is already accepted by your backend, or you can use proxy that will make requests to backend from server side.您可以在后端配置 header Access-Control-Allow-Origin
以接受来自“localhost:3000”的请求,或者您可以在端口:4200
上启动您的反应应用程序,因为它已经被您的后端接受,或者您可以使用将从服务器端向后端发出请求的代理。
In production environment you usually have backend and frontend working on same origin, so proxy is a good way to solve CORS problems during development.在生产环境中,您通常有后端和前端工作在同一来源,因此代理是解决开发过程中 CORS 问题的好方法。 You also can setup some reverse proxy, like nginx, so your backend and frontend would both be on same origin.您还可以设置一些反向代理,例如 nginx,这样您的后端和前端都将位于同一来源。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.