Create react app proxy on when using direct normal links - reverse-proxy

Well in my application I have a link to download a report, the report is dynamically generated. During testing the generation happens in a test server, to which CRA normally correctly redirects for xhr requests.
The link is called like:
<a href={'/api/event/2/report/csv'} download={"report.csv"}>
Load CSV report
</a>
CRA runs on port 3000, and it should act as a transparent host for all request to /api - redirecting them to localhost:3000/api. For the xhr requests this works smoothly by using the default reverse proxy. In package.json:
{
"proxy": "http://localhost:1337"
}
However this doesn't work at all. When I test above link I get a failed no file error on chrome. If I remove the download parameter I get a 404 page.
If I manually link to http://localhost:1337/api/event/2/report/csv it works (given there's no cookie so I the code shows a permission denied, but that's expected).
How can I get cra to work with this?

Related

Cloudflare Pages Wrangler local proxy returns 404 for SPA

I have a Pages Single-Page App (SPA) with a hello world function. I've got it working on Cloudflare servers. the '/' route works great. '/api/hello' my function works great and also '/about' which is resolved by my SPA router works fine.
However, when I proxy the tooling to run it locally using "npx wrangler pages dev -- npm start" and try '/about' I get a 404 error. Is this a bug in Wrangler? It seems it does not recognize this is an SPA and is either trying to find a function or a page. Any settings I'm missing?
Exact error:
Exact Error:
404 File Not Found
Url: /about
File: /Users/…/…/…/www/about
(using … to obfuscate exact directory names)

Next-auth Receiving 404 after login attempt in deployed Vercel application

Developing a next.js application that uses next-auth for authentication. It is currently setup with GitHub as the only Provider.
In development, the authentication works just fine.
In production, after I click "Sign in with GitHub", I am directed to a 404.
I'm 99% sure this has to do with the callback URL I have setup in my GitHub OAuth app. For dev purposes it is set to http://localhost:3000/api/auth/callback/github. Obviously this is no good for a deployed app, but I don't know what to set it to. I've tried a couple of different URL's with no luck.
Other than the callback URL is there anything else I need to set up in my code to get this working in production?
Other than the callback URL, this is from the docs:
https://next-auth.js.org/getting-started/example#deploying-to-production
When deploying your site set the NEXTAUTH_URL environment variable to the canonical URL of the website.
NEXTAUTH_URL=https://example.com
You should set this as a production environment variable on the Vercel dashboard to link to the URL where Vercel deployed your site.
It is possible that this is because you changed your .env.local file to contain your GITHUB_ID value, but did not restart next.js to pick up the new value.
Try stopping your dev sever, and restarting it (with npm run dev).
The clue is that the Github authentication URL contains &client_id= at the end, with no Github ID token.
I ran into the same issue and I used next export for static HTML export. Without next export, just simply to use next build, it worked for me on vercel.
I had the same 404 problem, it was due to the changes in Version 4 of NextAuth, I was getting a 404 page when logging in and changing the code in nextauth.js fixed it for me, you could try the following:
import NextAuth from 'next-auth'
import GitHubProvider from 'next-auth/providers/github'
export default NextAuth({
providers: [
GitHubProvider({
clientId: process.env.GITHUB_CLIENT_ID,
clientSecret: process.env.GITHUB_CLIENT_SECRET,
}),
],
})

Vue : 404 page not found after refresh page

I have Vue website works correctlly on localhost ,after I build it and uploaded it on server ,the routes works fine but have two problems :
1- when I click on route and the page open ,then if i refresh the page it gives me an error 404 page not found.
2- the connect to api by axios don't work?
How can I solve them?
The problem is your web server. Make sure that your web server (Apache, Nginx, Express etc.) always points to the Index.html.
Your web server is not aware that the SPA should do the routing.

How to fix "Cross-Origin Read Blocking (CORB) blocked cross-origin response with MIME type application/json." issue?

I'm currently developing the frontend (VueJS) for a project and to test my login and register logics I'm using laravel as backend, though we'll be actually working with springboot for backend. I was coding in a desktop and everything was normal. So I just started to work with my laptop. I got the same project, everything is equal. When I use postman to make the requests, it works normally, but when I try to make them with the form from my website, I get that error.
I've looked everywhere but couldn't fix it. Nothing I tryed did work. And It seems that no one else had a similar problem.
Cross-Origin Read Blocking (CORB) blocked cross-origin response http://127.0.0.1:8000/api/login with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.
Add proxy configuration in vue.config.js file
module.exports = {
devServer: {
proxy: 'http://localhost:4000'
}
}
This will tell the dev server to proxy any unknown requests (requests that did not match a static file) to http://localhost:4000.
here is a link to the doc for more detail

$.get request shopify error

I've have weird issue, on dev theme (preview mode) $.get request works fine -> https://woolet-co.myshopify.com/blogs/news
but on active theme on main domain https://woolet.co/blogs/news there is an error, I can't figure it out why its happening.
If you try this code in console on both URLs you will see the response code error on main domain:
$.get('/admin/blogs/19692355/articles/229491718.json', function(data) {
console.log(data);
});
I guess that it's connected with domains, on https://woolet-co.myshopify.com/blogs/news $.get request works fine and on https://woolet.co/blogs/news it shows error in console.
I've tried to execute $.get request through Shopify Private App with login and password included but without any result.
This isn't working for you because your XMLHttpRequest is for a different domain than the one the page is on.
For this to properly work, you need to enable CORS. I would also suggest putting in the absolute URL of where this JSON file is located.
It would work on your preview mode. Because there both shop url and admin url are on same domain
https://woolet-co.myshopify.com/blogs/news
But when you try to browse using your real domain "https://woolet.co/". The domain from where you are making the get request and the domain from where the file is coming becomes different. ( https://woolet-co.myshopify.com/admin/blogs/19692355/articles/229491718.json )
As far i know you can not enable cors on shopify
and
It wont work because "https://woolet-co.myshopify.com/admin/blogs/19692355/articles/229491718.json" requires you to be logged it to the store as admin.
Try some other way.