0

I realize this question is asked here at nauseum but I'm unable to find a solution to something that seems so common.

Server app is showing the following response when trying to make a post request:

Access-Control-Allow-Headers x-requested-with, Content-Type…accept, client-security-token Access-Control-Allow-Methods POST, GET, OPTIONS, DELETE, PUT Access-Control-Allow-Origin * Access-Control-Max-Age 1000

but getting error:

> Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3000/contact. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

I'm trying to make the request using JS fetch function:

  fetch('//<my-app-server.com/endpoint>', {
    method: 'post',
    body: send_data,
    mode: 'cors',
    headers: {
      'Accept': 'application/json, application/xml, text/plain, text/html, *.*',
      'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
    },        
  }).then((result) => {
   console.log('success')
  }).catch((error) =>{
    console.log(error);
  })

I've tried with and without the headers. Using a managed apache host and just want to open up global CORS requests. Not sure what I'm missing here.

Any advice would be welcome.

SS44
  • 837
  • 2
  • 10
  • 26
  • Is the remote server you're trying to fetch from set up to use CORS and does it specify your server as an allowed origin? If your website is served from `ABC.com`, and your webpage wants to request a resource from `XYZ.com`, `XYZ.com` must explicitly give `ABC.com` permission as an allowed origin. Setting the headers on `ABC.com` is not relevant, as it isn't a cross-origin server. –  Aug 14 '18 at 20:24
  • Which domain responded with the `Access-Control-Allow-Origin` header? Was it, from your example, **my-app-server.com** or was it **localhost:3000**? – zero298 Aug 14 '18 at 20:29
  • my-app-server.com responded with the above Access Control headers. I've set the remote app server to return: Access-Control-Allow-Headers x-requested-with, Content-Type…accept, client-security-token Access-Control-Allow-Methods POST, GET, OPTIONS, DELETE, PUT Access-Control-Allow-Origin * Access-Control-Max-Age 1000 and the js console is showing those returned in the network tab. – SS44 Aug 14 '18 at 20:32
  • 1
    Are you testing the application in Chrome? If so, it could be the CORS bug with Chrome/localhost described here: https://stackoverflow.com/questions/10883211/deadly-cors-when-http-localhost-is-the-origin – Ryan Gibbs Aug 14 '18 at 20:43
  • Hi @RyanGibbs, seeing the error in Firefox and Chrome. – SS44 Aug 14 '18 at 22:46

1 Answers1

0

Error was related to server performing a 301 after form submission back and redirected page didn't have CORS headers.

fetch followed the page back to to redirected page and failed on CORS.

SS44
  • 837
  • 2
  • 10
  • 26