question

nimblshop_1 avatar image
0 Likes"
nimblshop_1 asked

JavaScript Fetch Cors Issue

I'm trying to use the fetch method to get a response from the end point, but I get this error instead: > Failed to load > http://svcs.ebay.com/services/search/FindingService/v1?OPERATION-NAME=findItemsByKeywords&SERVICE-VERSION=1.0.0&SECURITY-APPNAME=xxxxxxxxxxxxxxx&GLOBAL-ID=EBAY-US&RESPONSE-DATA-FORMAT=JSON&REST-PAYLOAD&keywords=harry%20potter&paginationInput.entriesPerPage=3: > Response to preflight request doesn't > pass access control check: 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. I think this error has something to do with the default values set in the fetch method. How can I fix this and get the server to send a response? Here is my code: const options = { method: 'GET', cors: true, // allow cross-origin HTTP request }; let url = " http://svcs.ebay.com/services/search/FindingService/v1"; url += "?OPERATION-NAME=findItemsByKeywords"; url += "&SERVICE-VERSION=1.0.0"; url += "&SECURITY-APPNAME="xxxxxxxxxxxxxx"; url += "&GLOBAL-ID=EBAY-US"; url += "&RESPONSE-DATA-FORMAT=JSON"; url += "&REST-PAYLOAD"; url += "&keywords=harry%20potter"; url += "&paginationInput.entriesPerPage=3"; fetch(url, options) .then((data) => { console.log(data) })
javascriptes6fetch
10 |600 characters needed characters left characters exceeded

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

1 Answer

· Write an Answer
clickimusprime avatar image
0 Likes"
clickimusprime answered
cors: true isn't valid, and will be ignored. CORS is the default, so you get it anyway. Access-Control-Allow-Origin message means the server isn't configured for CORS. People have been requesting CORS support for years. Even if they did add it, you be subject to outage when it breaks. Setting mode:'no-cors' in the options as suggested will result in an "opaque" result that cannot be used in Javascript, only in service workers. ES6 has jumped the shark with this stuff and is more trouble than it's worth. If you have to use client side javascript do an AJAX jsonp request (use jQuery) Otherwise setup your own proxy script in PHP/whatever on the same domain or with your own CORS config to do the API requests and fetch() from that. This has the advantage of hiding your app key and you can do other things in the PHP script like logging server side. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch https://fetch.spec.whatwg.org/#concept-filtered-response-cors
10 |600 characters needed characters left characters exceeded

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Write an Answer

Hint: Notify or tag a user in this post by typing @username.

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.