Develop Reference

CORS in Nextjs Application on Vercel

I am currently working wiht my first bigger NextJS application and I ran into the classic CORS problem.
I have a backend, which is hosted on a different server/url, I get my json data from this backend.
My frontend written in NextJS is deployed on Vercel.
I do know, that I have to enable CORS both on the backend side, as well as on the frontend side, in my localhost dev, everything is working fine (even fetching data from backend)
I already followed this guide: https://vercel.com/knowledge/how-to-enable-cors, to enable CORS in my NextJS Application. I modified the nextjs config:
module.exports = {
async headers() {
return [
{
source: "/.*",
headers: [
{ key: "Access-Control-Allow-Credentials", value: "true" },
{ key: "Access-Control-Allow-Origin", value: "*" },
{ key: "Access-Control-Allow-Methods", value: "GET,OPTIONS,PATCH,DELETE,POST,PUT" },
{ key: "Access-Control-Allow-Headers", value: "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" },
]
}
]
}
};
However, when deploying the app on vercel, I receive the following error:
Access to fetch at 'https://<my-censored-backend-url>' from origin 'https://<my-frontend-url>.vercel.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
In my backend (written in rails), I already configured my frontend on vercel to be allowed for CORS.
Is there anything I am missing?
Do you guys have any experience in CORS and fetching data for NextJS from a different server?
I am using getStaticProps, getServerSideProps AND SWR for fetching.
Any help would be appreciated

I think NextJS has a weird issue that sometimes it just throws the CORS error randomly.
In my case, with a wrong URL it will throw this CORS error.
For example, I used "https://localhost:3000" and then it throws the CORS error. And it worked with "http://localhost:3000".
So my suggestion would be to double check the URL that you are using.
Also, be sure to not include a trailing slash like "http://localhost:3000/" may not work.

FirebaseAuth requests blocked by cors policy in js app

I know that similar questions exist, but I didn't find a solution for me.
I have a built-in Flutter web app that is compiled into javascript. I had it hosted on Firebase Hosting. The in-app first screen is the login page which uses FirebaseAuth for logging. Whenever the first time website is open - all internal library requests have status failed. When after that I press CTRL+F5 everything works smoothly.
Here is a comparison of the same first internal request. On left is successful one, on right one which fails due to "** has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'."
I found out about the configuration of headers for Firebase Hosting, so I did it:
{
"hosting": {
"public": "",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [ {
"source": "**",
"headers": [
{
"key": "Access-Control-Allow-Origin",
"value": "*"
},
{
"key": "Access-Control-Allow-Methods",
"value": "DELETE, POST, GET, OPTIONS"
},
{
"key": "Access-Control-Allow-Headers",
"value": "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
}
]
}]
}
}
In app there is a simple initialization of a firebase in didChangeDependencies with required data. Then FirebaseAuth.instance.signInWithEmailAndPassword(...) On index.html section about firebase:
<script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-firestore.js"></script>
<script src="main.dart.js" type="application/javascript"></script>
I have tested it in Chrome many times and always failed. Only on localhost runs smoothly
More info:
requests on "normal" (without clearing cache) return to page:
requests after CTRL+F5 on the same site:
Those blurred on red are the URL of my app

The cause of this issue was from the service worker blocking Firebase Auth calls on web. This has been fixed as mentioned on this GitHub issue thread. Updating to the latest version of firebase_auth plugin should fix the issue.

Gertting error of CORS and CORB for SSE event in Javascript

I am working with SSE event, when i send request from client to server for connection,then get error like,"No 'Access-Control-Allow-Origin' header is present on the requested resource."
I am using Sails on backend and react on frontend side.
Here are some code for reference.
Frontend:-
let es = new EventSource(`http://localhost:1337/api/v1/sse?user=${username}`);
On backend i also allow cors in config/security.js file
cors: {
allRoutes: false,
allowOrigins: '*',
allowCredentials: false,
},
Note:- If i disable chrome's security , then in new chrome window its works
/usr/bin/google-chrome --disable-features=CrossSiteDocumentBlockingAlways,CrossSiteDocumentBlockingIfIsolating --disable-web-security --user-data-dir="/tmp/chrome_tmp"

I found the solution , problem was with sails cors configuration.
It should be like
cors: {
allRoutes: true,
allowOrigins: '*',
allowCredentials: false,
},

How to serve cdn links for assets in NuxtJS?

I am working on a NUXTJs to create server side rendered website. My question is that although there is a assets/static folder in nuxt project structure to serve images & static files, i want to set cdn link for all my image source.
What would be the best approach to do that?
Possible ways I can think of:
Vuex Store - set baseURL for the images and then use in components
env - use environment variable to set the cdn URL
TIA

You can set it via publicPath property in nuxt.config
export default {
build: {
publicPath: 'https://cdn.nuxtjs.org'
}
}
https://nuxtjs.org/api/configuration-build/#publicpath

If you have a team working on the project, use Vuex. It save the baseURL in the project itself. Less hassle to copy/share the env variables to the team.

Alright after spending a couple of hrs, As answered above you can set cdn url to nuxt.config.js file. If you are someone like me who is using CloudFront / S3 bucket, After npm run build. you can create nuxt folder to your s3 bucket and upload everything from .nuxt/dist/client to this folder. the public path looks as follows in nuxt config file
build: {
publicPath: 'https://your-cdn-url.net/nuxt'
}
But for PWA,manifest.json file it is important that the manifest is served from the same domain, and not from the CDN.so you'll have to override the public path.you can find more info here
I'm using nuxt 2.15,syntax has to be exactly like as follows. nuxt.config.js
modules: [
[
'#nuxtjs/pwa',
{
workbox: { publicPath: '/_nuxt/' },
manifest: { publicPath: '/_nuxt/' },
},
],
],
3rd issue that I faced was, I've created categories.json file and uploaded to s3 bucket and was calling from axios, to avoid any cors issue update s3 cors setting as follows
You can find this in s3 bucket -> Permissions then -> scroll below -> () Cross-origin resource sharing (CORS)
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"HEAD"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": [],
"MaxAgeSeconds": 3000
}
]

How to resolve 'Cross Origin domain' issue without using 'CORS' chrome extension using Javascript to access JIRA REST API

I've developed an application to access JIRA REST API. By adding 'CORS' chrome extension, I'm able to get the data from http://localhost:8000 by enabling 'CORS'
But the application doesn't work without CORS extension.
Can someone please let me know is there a way to access the REST API without 'CORS' extension.

For me it worked by doing following steps:
add a property in manifest.json
"permissions": [
"activeTab",
"tabs",
"notifications",
"http://*/",
"https://*/"
]
and try to request the rest API using jquery
var settings = {
"async": true,
"crossDomain": true,
"url": "your jira server URL",
"method": "GET",
"headers": {
"authorization": "Basic <base64 username:password>",
"cache-control": "no-cache"
}
}
$.ajax(settings).done(function (response) {
console.log(response);
});