We Keep Coding

CORS redirect issue on a local development environment Laravel and Vue project

I'm having some CORS issues. In my environment I have:
Laravel project running on 127.0.0.1:8000
Vue project running on localhost:8080
This is the configuration of Vue:
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
proxy: {
'/api': {
target: 'http://127.0.0.1:8000',
changeOrigin: true
},
'/sanctum': {
target: 'http://127.0.0.1:8000',
changeOrigin: true,
}
}
}
})
I'm trying to do the following requests to the Laravel server:
axios.get('sanctum/csrf-cookie').then(() => {
axios.post('api/login', {
email: email,
password: password
}).then(response => {
this.user = response.data.user
this.token = response.data.token
})
})
In the first request, the XSRF token is being set. The second request to 'api/login', however, is receiving a 302 redirection to 127.0.0.1:8000 (the /api/login route is not being considered).
The Javascript console is showing the following error:
Access to XMLHttpRequest at 'http://127.0.0.1:8000/' (redirected from 'http://localhost:8080/api/login') from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I've tried changing both client and server side configurations but I'm always going back to where I started from.
Some additional details:
if I do the login request directly toward 127.0.0.1:8000/api/login, I receive a CSRF mismatch error from Laravel (so there is not a CORS issue)
this is how the API login route is configured:
Route::post('login', '\App\Http\Controllers\Auth\LoginController#apiLogin');

Error React Proxy error: Could not proxy request

Why do I got this error:
Proxy error: Could not proxy request /api/v1/management/me from localhost:3000 to http://localhost:8080 (ECONNREFUSED).
Got this axios setting:
axios.defaults.baseURL = "http://localhost:3000/";
And set this in package.json:
"proxy": "http://localhost:8080"
tried also:
"proxy": "http://localhost:8080/"
And have following call:
axios({
method: "get",
url: "api/v1/management/me",
data: {},
headers: { crossDomain: true },
})
When I call directly http://localhost:8080/api/v1/management/me I got response from server.
I have following backend, Vapor route setting. Maybe something wrong / specific here?
let protectedAPIRouter = authSessionRouter.grouped("api/v1").grouped(User.guardAuthMiddleware())
let managementAPIRouter = protectedAPIRouter.grouped("management")

I would suggest the following solutions:
Try to change localhost to IP address: "proxy": "http://your_IP_address:8080"
Try this construction also:
"proxy": {
"/api/*": {
"target": "http://localhost:8080",
"secure": false
}
}

You need to set up a proxy to the backend service you want to access.
First install (http-proxy-middleware) package.
Remove the ("proxy": "http://localhost:8080/") or the Url behind the proxy in the package json file.
In the src folder create a file (setupProxy.js) and and the following code.
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:8080',
changeOrigin: true,
})
);
};

I solved this issue change localhost to 127.0.0.1 in the package.json over the client project.

Webpack devserver proxy not working to get round CORS issue

I have a React app which is running webpackdevserver on port 3000.
I have an AWS .NetCore Lambda server running localhost on port 5050.
When I try and make a request I am getting the cors error:
Access to fetch at 'http://localhost:5050/' from origin
'http://localhost:3000' has been blocked by CORS policy: Response to
preflight request doesn't pass access control check: 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.
I was hoping to use a proxy, as per the documtation here in order to forward my requests on using the same domain to get round this.
https://medium.com/#drgenejones/proxying-an-external-api-with-webpack-serve-code-and-a-restful-data-from-separate-endpoints-4da9b8daf430
However it is not working, I don't see any difference at all with the settings applied, can anyone help?
devServer: {
port: 3000,
disableHostCheck: true,
compress: true,
host: 'localhost',
proxy: {
'/': {
target: 'http://localhost:5050',
secure: false,
},
},
},
My JavaScript to call the server is like this... I have also tried with the url http://localhost:3000 but this just returns a bad request error.
const result = await fetch('http://localhost:5050', {
method: 'POST',
headers: new Headers({ 'Access-Control-Allow-Origin': '*' }),
body: JSON.stringify({
method: 'upload',
test: 'test',
}),
});

I guess the issue is to set / which could just fetch the current server so you might need to differentiate between your web app vs your server (most likely via a specific path such as /api, but you can choose to pass this path to your proxy server or not).
So you would change as following:
Your configuration of proxy first to take api to go through proxy:
proxy: {
'/api': {
target: 'http://localhost:5050',
pathRewrite: {'^/api' : ''}, // In this case we don't pass `api` path
}
}
Next thing is to change your code to call the same domain + port 3000 normally (proxy would do the rest for you by passing to your server with port 5050 which you configured):
const result = await fetch('http://localhost:3000/api', {
// ...
});

React Js Proxy not working

I am totally new to react. Here, I am trying to make an API request.
So I set proxy in package.json like
"proxy": {
"/proxy": {
"target": "http://localhost:9000",
"pathRewrite": {
"^/rez": ""
},
"changeOrigin": true
}
}
My react app is on localhost:8080. Now, Second way I used
"proxy": "http://localhost:9000"
and I used it in the action,
with the hep of the axios
const request = axios.post('/rez/login', values);
But This is not working, It is not making any call to the 9000, Its using 8080 . What is the way to do this ?. I have gone through all the github and stack questions but not able to get this working. Can any one help me with this ?

This seemed to work for me I didn't include the proxy:
devServer: {
historyApiFallback: true,
proxy: {
"/api": "http://localhost:9000"
}
},
and when I called the api route it went /api/getUsers etc...

Rewriting Webpack Proxy URLs

I'm using Webpack Dev Server to proxy my files from an external url, that's because I'm using it to develop locally and proxying the PHP/Twig files from the server, so that way I don't need to set up all the back-end locally.
But the problem is that I need to rewrite the assets urls to pull these files from my local machine, not from the proxy. Right now, when I open my localhost, all the assets are being loaded from the server. i.e: http://mycoolwebsite.com/core/somefolder/assets/styles.css
And I need to replace that to pull from my localhost, like this:
/assets/styles.css
This is what I have now:
devServer: {
compress: true,
port: 9000,
proxy: {
'*': {
target: 'http://mycoolwebsite.com',
changeOrigin: true,
secure: false
}
}
Any clue?
Thanks!

you want all request that go to your server "http://mycoolwebsite.com/**"
to go to your local machine: "http://localhost:9000/" (assuming its running on port 9000)
so try this:
proxy: {
'/assets/**': {
target: 'http://localhost:9000',
secure: false,
pathRewrite: function(req, path) {
//use the pathRewrite to modify your path if needed
return path;
}
}
now it shouldn't make any difference what server you are actually calling. every request that includes '/assets/' should go to your localhost. (I can not test it atm)