-1

I'm aware of the whole " preflight request " story... and my server does support options request.

What bothers me is that I tried every single online API testing {Postmamn,reqbin...} and it works just fine but when I use simple axios code or fetch I get the options request with status of 401 Unauthorized!

Localhost env runs on localtunnel & i'm using next.js default server configuration

Added nginx to the server from https://enable-cors.org/server_nginx.html

/example.com/conf/nginx/cors.conf


**Axios code** 
    var myHeaders = new Headers();
    myHeaders.append("Access-Token", "token-here");

    var requestOptions = {
        method: 'get',
        headers: myHeaders,
        crossDomain: true,
        redirect: 'follow'
    };

    fetch("https://example.com/x/wp-json/api", requestOptions)
        .then(response => response.text())
        .then(result => console.log(result))
        .catch(error => console.log('error', error));

Console error

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://example.com/xx/wp-json/x/api. (Reason: CORS preflight response did not succeed). Status code: 401.

(Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘http://localhost:3000, http://localhost:3000’)
Server has the following headers
access-control-allow-credentials:true
access-control-allow-headers: Authorization, X-WP-Nonce, Content-Disposition, Content-MD5, Content-Type
access-control-allow-methods: OPTIONS, GET, POST, PUT, PATCH, DELETE
access-control-allow-origin: https://localtunnel-URL.loca.lt
content-type: application/json; charset=UTF-8




enter image description here

AXIOS request method changes to 'OPTIONS' instead of 'GET'

Christian
  • 53
  • 1
  • 8

1 Answers1

0

I'm aware of the whole " preflight request " story... and my server does support options request.

Your server is requiring a authorization before allowing access to the OPTIONS response.

Essentially the conversation goes something like this:

Browser: May I make a request that includes my credentials?

Server: Since you didn't include your credentials when asking for permission to include your credentials, you cannot have permission to include your credentials.

You need to exclude OPTIONS requests from authn/authz.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • How do I do that? – Christian Jun 22 '22 at 14:27
  • I know absolutely nothing about your server-side code. Try asking a new question about how to change it. Include a [mcve]. Include suitable tags. Since the URL includes WP I would guess that you'd be asking a [tag:wordpress] question, so I wouldn't be answering it, but someone who knows something about that topic might. – Quentin Jun 22 '22 at 14:30
  • Server side code is PHP/WordPress nginx – Christian Jun 22 '22 at 14:39
  • And why I don't see that error when I use Postman or any other API testing tool – Christian Jun 22 '22 at 14:40
  • 1
    See the section "Why the Same Origin Policy only applies to JavaScript in a web page" in https://stackoverflow.com/a/35553666/19068 – Quentin Jun 22 '22 at 14:41
  • I've not found anything o how to exclude Options requests from authn/authz in wordpress – Christian Jun 22 '22 at 14:47
  • Then ask a question about it as I suggested. – Quentin Jun 22 '22 at 14:49