CODEWITHSUNDEEP
reactjskoa2http-proxy-middleware
tong tian
tong tian

Reputation: 11

I have a cross-domain request problem about React

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

Upvotes: 0

Views: 350

Answers (2)

FelixP
FelixP

Reputation: 46

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.

Upvotes: 1

Júlio Almeida
Júlio Almeida

Reputation: 1869

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

Upvotes: 0

Related Questions