0

I have a problem. When I click the button, an error is reported on the page.

"Access to XMLHttpRequest at 'http://localhost:8000/hello' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

Here is client code

    function SendRequest() {
        axios({
            url: "http://localhost:8000/hello",
            method: "GET",
        }).then((res)=>
        {
            console.log(res);
        });
    }

Here is server code

     app.use((ctx, next) => {
        console.log("ASDFSFDSF");
        createProxyMiddleware({
            target: "http://localhost:8000",
            changeOrigin: true
        })
    });

The server use koa framework

tong tian
  • 11
  • 4

2 Answers2

1

If you're using express as a backend framework you can install a CORS-Middleware (npm i cors in your backend directory) and use it as an active middleware (globally, so for every incoming request) by calling app.use(cors()) after importing it using const cors = require("cors").

See here for more information about express and CORS Middleware.

FelixP
  • 31
  • 4
0

That's not a React problem. That's the back-end blocking the request to your app. Read more about CORS.

Júlio Almeida
  • 1,539
  • 15
  • 23