6ichem Posted January 13, 2021 Share Posted January 13, 2021 (edited) I'm getting this error when making a get request from my frontend to the IPB api: Access to XMLHttpRequest at 'url' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. The request works fine when using postman and passing the API as username with no password (like mentioned in the docs) but when doing this with react/axios on the frontend it doesn't seem to work. Is this an issue with IPB? How can it be fixed? I'm no backend pro so any help would be really appreciated. Thanks Edited January 13, 2021 by 6ichem Link to comment Share on other sites More sharing options...
CoffeeCake Posted January 13, 2021 Share Posted January 13, 2021 The first Google result for the error you're getting seems to match your issue: https://stackoverflow.com/questions/20035101/why-does-my-javascript-code-receive-a-no-access-control-allow-origin-header-i Adding an appropriate Access-Control-Allow-Origin header would be something you'd do at your web server (apache, nginx, IIS, etc.). 6ichem 1 Link to comment Share on other sites More sharing options...
bfarber Posted January 13, 2021 Share Posted January 13, 2021 If you make the request within the client/browser, you need to content with CORS which is designed to allow cross-domain requests to work but also provide protection against javascript-based attacks. Essentially, you'll need to add a few response headers for these requests which is typically done at the server level. Postman doesn't run in the browser context which is why it works without an error. One word of caution - running any sort of API requests via javascript exposes the API credentials. We'd only recommend using an OAuth-based client for API requests if javascript is going to be executing the API requests, since the permission level will match the current logged in user anyways. 6ichem 1 Link to comment Share on other sites More sharing options...
6ichem Posted January 14, 2021 Author Share Posted January 14, 2021 16 hours ago, bfarber said: If you make the request within the client/browser, you need to content with CORS which is designed to allow cross-domain requests to work but also provide protection against javascript-based attacks. Essentially, you'll need to add a few response headers for these requests which is typically done at the server level. Postman doesn't run in the browser context which is why it works without an error. One word of caution - running any sort of API requests via javascript exposes the API credentials. We'd only recommend using an OAuth-based client for API requests if javascript is going to be executing the API requests, since the permission level will match the current logged in user anyways. Well there isn't really a point of using OAuth if the information I'm trying to get is basically something public that can be viewed by even guests right? Link to comment Share on other sites More sharing options...
Stuart Silvester Posted January 14, 2021 Share Posted January 14, 2021 52 minutes ago, 6ichem said: Well there isn't really a point of using OAuth if the information I'm trying to get is basically something public that can be viewed by even guests right? The difference is that when you use an API key, you're interacting at a high level. These requests do not have extra permission checks on them to determine if the end user can see the content. Even if you're specifically crafting a URL to fetch topics from a certain forum, your same API key could be used to fetch topics from a secret forum that you don't want anyone to see. Quote When using an API key, all data is available and all actions can be performed. For example, if you send an API request to GET /forums/topics, every topic in the community will be in the results; if you send an API request to POST /forums/topics you can create a topic as any user on the community. It is therefore very important that you always keep the API Keys secret, and only grant access to the endpoints you intend to use. https://invisioncommunity.com/developers/rest-api 6ichem 1 Link to comment Share on other sites More sharing options...
6ichem Posted January 14, 2021 Author Share Posted January 14, 2021 6 minutes ago, Stuart Silvester said: The difference is that when you use an API key, you're interacting at a high level. These requests do not have extra permission checks on them to determine if the end user can see the content. Even if you're specifically crafting a URL to fetch topics from a certain forum, your same API key could be used to fetch topics from a secret forum that you don't want anyone to see. https://invisioncommunity.com/developers/rest-api Good point, I'll try doing it with OAuth (I never used it before). Would it require cors as well? I'm still struggling to fix that... Link to comment Share on other sites More sharing options...
Stuart Silvester Posted January 14, 2021 Share Posted January 14, 2021 2 minutes ago, 6ichem said: Good point, I'll try doing it with OAuth (I never used it before). Would it require cors as well? I'm still struggling to fix that... Yes, you would still need to configure the CORS headers. The main difference is that you will be sending requests as an authenticated user instead, so they'll only be able to see things that they're allowed to see and perform actions where allowed. bfarber 1 Link to comment Share on other sites More sharing options...
Recommended Posts