No 'Access-Control-Allow-Origin' header on AUCTION API

API Discussion
Hi!

I'm trying to get a list of things at auction using API.
I'm using React and trying to send a request using the fetch()
First I get a link to the .json file like "http://auction-api-eu.worldofwarcraft.com/auction-data/.../auctions.json"
Then I try to query this link and get the data, but I get an error
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

This is code my code:

fetch('https://us.api.battle.net/wow/auction/data/...')
.then((response) => response.json())
.then((responseJson) =>
{
fetch(responseJson.files[0].url)
.then((res) => res.json())
.then((resJson)=>
{
this.setState({
isLoading: false,
date:resJson
})
})

})
Yesterday I used the same code when creating a React-native android app and it worked!!!
Today I tried to do the same for my site and got this error=(
I do not think that the react native app adheres to the same rules as the web browser.

The browser will not allow you to break the CORS. Blizzard does sadly not provide CORS headers on their AH dumps. I guess that their CDN does not support it for some reason.

Edit: You could use your backend to pipe the response with the correct headers to your client.
You can use "Allow-Control-Allow-Origin" chrome extension while running your react app locally.

I've also found success doing api calls from a node/express backend using the cors NPM package

var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

This has your backend send cors headers to your browser
You can also use cors-anywhere to proxy requests. You can use a hosted solution or host your own in a simple nodeJS app.

https://github.com/Rob--W/cors-anywhere

Join the Conversation

Return to Forum