CORS policy: No 'Access-Control-Allow-Origin' header present when doing fetch request

Solved

CORS policy: No 'Access-Control-Allow-Origin' header present when doing fetch request

noah_haub
Shopify Partner
25 2 5

Hello,

 

I'm currently building a tracking software for e-commerce brands.

I want to provide a JS script that Shopify store owners can add to their post-purchase order status page so that I can track the purchases.

 

When a customer orders something and lands on the order status page I want to send a request to my server to know someone placed an order. My problem is when making that request I get this error:

 

Access to fetch at 'http://localhost:8080/xxx from origin 'http://127.xxxxx' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

 

I honestly don't know how to approach this. All I want is to send a request to my server to know when an order gets placed. That's what my request looks like:

 

 

 

fetch("http://localhost:8080/xxx", {
    mode: "cors",
    credentials: "include",
    method: "PATCH",
    body: bodyData,
    headers: {
        'Content-type': 'application/json; charset=UTF-8',
        'Accept': 'application/json',
        'Access-Control-Allow-Origin': 'http://127.xxx',
        'Access-Control-Allow-Credentials': 'true'
    }
}). then((response) => response.json()).then((json) => console.log(json));

 

 

 

I would really appreciate any kind of help on this since I can't come up with a solution.

I hope you understood my question. In case you want me to specify something please let me know.

Looking forward to your reply.

Kind regards, 
Noah Haubenreiser

Accepted Solution (1)

noah_haub
Shopify Partner
25 2 5

This is an accepted solution.

Honestly, I do not know why I got and am still getting this error when doing it this way but I found a way around it.

 

The request now works perfectly. All I did was stop using fetch and use Axios to make the request.

That's really all I did and now it works for some reason. Maybe my fetch request was wrong in some way. Who knows 🙂

View solution in original post

Replies 3 (3)

noah_haub
Shopify Partner
25 2 5

This is an accepted solution.

Honestly, I do not know why I got and am still getting this error when doing it this way but I found a way around it.

 

The request now works perfectly. All I did was stop using fetch and use Axios to make the request.

That's really all I did and now it works for some reason. Maybe my fetch request was wrong in some way. Who knows 🙂

Nathan617
Tourist
4 0 2

Hi,

 

What do you mean by Axios?

James_J
Shopify Partner
38 3 6

Axios is promise-based HTTP client for node.js and the browser

https://axios-http.com/docs/intro

 

You can use it for network request like fetch, ajax, XMLHttpRequest. Axios is not standard so you need to download the library to use it.