Pre-flight getting OPTIONS 403 (forbidden)

Discussion Ask a question
,
1

Hey there!

I’m having issues with CORS handling my post requests from a third-party website/app.
(A Unity WebGL embed game).

From what I understand after reading some documentation my header should allow any request from anywhere but somehow it doesn’t go past pre-flight.


import {created, serverError} from 'wix-http-functions';
import wixData from 'wix-data';

export function post_addUserLeaderboard(request) {
let options = {
"headers": {
"Access-Control-Allow-Credentials": "true",
"Access-Control-Allow-Headers": "Accept, X-Access-Token, X-Application-Name, X-Request-Sent-Timekl",
"Access-Control-Allow-Methods": "GET, POST, OPTIONS",
"Access-Control-Max-Age": "8000",
"Access-Control-Allow-Origin": "*",
"Content-Type": "application/json"
}
};
return request.body.json()
.then( (body) => {
let leaderboardEntry = {
"title": body.Title,
"score": body.Score
}
return wixData.insert("FastLifeLeaderboard", leaderboardEntry)
.then( (result) => {
options.body = {
"inserted": result
};
return created(options);
})
.catch( (error) => {
options.body = {
"error": error
};
return serverError(options);
});
})
.catch( (error) => {
options.body = {
"error": error
};
return serverError(options);
});
}

Here’s the error I’m getting in Chrome’s console:

593×739 34.8 KB

I’ve been on this for 2 days. Some people on stack overflow told me I should configure my server to respond to my POST request with a 200 OK but I can’t seem to figure out how to do that.

Any help with this would be extremely appreciated :slight_smile:

Raphael

2

You can see a code example for adding an ok() to your code here within the Wix HTTP Functions section in the Wix API Reference.
https://www.wix.com/corvid/reference/wix-http-functions.html
https://www.wix.com/corvid/reference/wix-http-functions.html#ok

Note too that as you have copied the post() section code example, that you should check that your code is correct.

Your code

return wixData.insert("FastLifeLeaderboard", leaderboardEntry)
.then( (result) => {
options.body = {
"inserted": result
};

Example code

return wixData.insert("myCollection", body);
    } )
    .then( (results) => {
      options.body = {
        "inserted": results
      };

You are missing ‘;’ and ‘})’ from these lines.

Also, why do you have the additional same code at bottom of your code?

});
})
.catch( (error) => {
options.body = {
"error": error
};
return serverError(options);
});
}

If you look in the put() section, you will see an example with ok() in the code.

Also, whilst there have a read of the options() section too.

// In http-functions.js

import {response} from 'wix-http-functions';

// URL looks like:
// https://www.mysite.com/_functions/myFunction/
// or:
// https://user.wixsite.com/mysite/_functions/myFunction/

export function options_myFunction(request) {
  let headers = {
      "Access-Control-Allow-Origin": "https://www.example.com",
      "Access-Control-Allow-Methods": "POST, GET, OPTIONS",
      "Access-Control-Max-Age": "86400"
  }
  return response({"status": 204, "headers": headers});
}

Finally, make sure that you are testing all of this on a fully published website.

Note
You must publish your site at least once before using both the testing and production endpoints. After that, you save your site for changes you make to testing endpoints to take effect and you publish your site for changes you make to the production endpoints to take effect.

3

Also, as you mention 403 error, make sure that you read the forbidden() section too.
https://www.wix.com/corvid/reference/wix-http-functions.html#forbidden

Plus, have a look at these pages too if not already done so.
https://support.wix.com/en/article/corvid-exposing-a-site-api-with-http-functions
How to Use HTTP Functions to Expose Your Site’s API | Corvid by Wix
https://www.wix.com/corvid/forum/corvid-tips-and-updates/example-myapi-and-myapiclient

4

Thanks for the awesome and well constructed response! This definitely points me towards resolving my issue! I’m just a bit confused by the options request.

From what I understand this is automatically called before any post/put or get request?

I’m confused as to what this is referring to in my backend.
Would it be an options_addUserLeaderboard?
or my initial post_addUserLeaderboard?

I added the following hoping this would respond to the flight request but it still returns a 403.


export function options_addUserLeaderboard(request) {
let headers = {
"Access-Control-Allow-Origin": "https://v6p9d9t4.ssl.hwcdn.net",
"Access-Control-Allow-Methods": "POST, GET, OPTIONS",
"Access-Control-Max-Age": "86400"
}
return response({"status": 204, "headers": headers});
}

I’m sorry if this is some basic stuff I’m just really trying to get my head around how this works.

Edit: in my c# code from which I send my post request I send no options request because I assume this is automatic? Should I be manually sending an options request before sending my post request?

5

If you look at this link here.
https://www.wix.com/corvid/forum/corvid-tips-and-updates/example-myapi-and-myapiclient

You can open it up in your Wix Editor and see all the page elements and code all fully setup for it.

Have a look at it and see if the code already setup gives you a helping hand.

6

I have already checked those out. These examples show how to fetch data of another website from the Wix API. I am trying to send data to the Wix API. Nowhere in this example does it show how to properly setup CORS OPTIONS responses to accept requests from third-parties in my backend code.

7

Okay, have a look at this Stack post about it too and see if it helps you.
https://stackoverflow.com/questions/35588699/response-to-preflight-request-doesnt-pass-access-control-check

8

Thanks a lot for taking some of your time to look into my issues GOS. It is greatly appreciated!

The solution proposed in this Stack implies I should bypass CORS. Of course If I do this on my end thing will work out fine but not for the users of my site/app.

I tried implementing CORS OPTIONS Headers as you suggested with the following:


export function options_addUserLeaderboard(request) {
let headers = {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "POST, GET, OPTIONS",
"Access-Control-Max-Age": "86400"
}
return response({"status": 204, "headers": headers});
}

But it still returns an error 403.

Do you know if there’s anything I am doing wrong as to implementing CORS in the backend?

9

You are using credentials at the top of your code.
“Access-Control-Allow-Credentials”: “true”,

So you can’t use the * wildcard
“Access-Control-Allow-Origin”: “*”,

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

For requests without credentials , the literal value “*” can be specified, as a wildcard; the value tells browsers to allow requesting code from any origin to access the resource. Attempting to use the wildcard with credentials will result in an error.
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials

10

This is good to know! I’ll remove this right now but unfortunately, I tried entering the direct URL with no luck.