I have a server with Fast API (Python) from which I get data over a REST API from my client (Vue.js on ngnix). Server and client are deployed in a Kubernetes cluster in one container each on a single Pod. I deploy the containers via dockerfiles.
When I send a GET request I get CORS problems. But locally (not on a Kubernetes Cluster) everything works. Error : Cross-source (cross-origin) request blocked: The same-source rule prohibits reading the external resource at http://localhost:5000/. (Reason: CORS request failed). Status code: (null).
In the following some code passages in which I suspect the problem.
FastAPI CORS Config:
origins = ["*"]
app.add_middleware(
CORSMiddleware,
allow_origins=origins,
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
Vue.config.js:
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
// devServer: {
// proxy: '???' maybe need something here ?
// }
})
Maybe someone has an idea what the problem is or a tip what to try. So far I have unfortunately found no solution on the internet.
Thanks for your help <3
On server side I have already allowed everything as origin (*). I also tried different configurations on Vue.js, but I don't know anything about it and couldn't find a solution on the internet.
Related
In my next.js project I'm trying to send a POST request using axios:
axios.defaults.baseURL = "https://{my-server-url}/api";
useEffect(() => {
axios({
method: "POST",
url: "/build_pages",
data: {
page_id: 3,
},
}).then((res) => {
console.log(res.data);
});
}, []);
I'm getting the following CORS error:
My server is [laravel] php and is deployed on cpanel, but before I deployed my backend to cpanel (i.e. when I was working on localhost) I did not get this error.
How do I turn off this error (note that I don't want to download any web browser extension to fix the CORS error)
I came across this link but it does not say where (which file) to add it to so I'm stuck
Edit: I tried the middleware solution provided in this answer: https://stackoverflow.com/a/69151121/12009071 but also it didn't work, howerver the error changed to:
Access to XMLHttpRequest at 'https://{my-server-url}/api/check_admin_login' from origin 'https://{my-server-url}.vercel.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
This is an API-side error. You have to allow cross origin requests on the API server. Based on your question, I assume your API is NOT the Next.js project.
Therefore, you should check the settings of your server. The next.js POST call is not the issue.
I have an app running on http://localhost:8081, which connects to backend running on http://localhost:8080 (the endpoint which it connects to is exactly on http://localhost:8080/stripe).
When I move the backend to heroku, it works fine, but when I want to test it on localhost, I get an error strict-origin-when-cross-origin
Of course, I read this Stack Overflow question: Vue Axios CORS policy: No 'Access-Control-Allow-Origin' and many other articles and they all say the same: create a vue.config.js file and add
module.exports = {
devServer: {
proxy: 'http://localhost:8080/'
}
}
to it. And so I do, but it doesn't help - I'm still getting this error. And now I don't know what to do. Is there any other reason why I keep getting this error?
I am new to Ionic framework (with Vuejs) and trying to make simple Crud app. But due to CORS issues, i can't able to login.
Browser console show XMLHttpRequest at 'http://localproject.test/api/login' from origin 'http://localhost:8100' has been blocked by CORS policy
I tried a lot of different solutions, without success Please help.
Thanks in advance.
You will allow CORS from your backend. If you want to resolve CORS issue from your end you will use ionic HTTP native plugin link. This is not recommended because you can't track requests from your network tab.
my suggestion you need to resolve your CORS issue from your backend.
If your app will be running on browser, use Proxy server.
Example: I want to post to http://localproject.test/api/login.
In package.json, I will add this line:
"proxy": "http://localproject.test/api"
My POST request in Login component:
axios
.post("/login", loginData)
.then((response) => {
...
}
return response.data;
})
.catch((error) => {
...
});
I have a Vue.js project wrapped in an Electron app. From one of my components (src/components/MoviesTable.vue), I'm making an axios call to a local JSON file (public/data/multimedia.json), like this:
axios.get('./data/multimedia.json').then(res => {
this.movies = res.data.movies;
})
When I run npm run serve to serve the Vue app, I experience no issues. However, when I build the Electron app, I receive the error:
Access to XMLHttpRequest at '.../multimedia-index-app/dist/data/multimedia.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
I've tried using proxies to no avail. I know that similar questions about CORS have been asked on SO, which offer different solutions, but I'm a noob, and I need clearer instructions than the ones that I've come across.
Please let me know if you require more information. Any help in resolving this problem would be greatly appreciated.
Thanks in advance.
If the JSON file should be bundled with the app, you don't need Axios, you can have Webpack load it:
import movies from './data/multimedia.json';
And use it in the component:
export default {
data() {
return {
movies
}
}
}
I am studying on a toy project using Vue. During development, I made api requests using axios from the front-end and faced a CORS problem. I would really appreciate it if you could give me some information.
Access to XMLHttpRequest at '...' 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 know CORS issues are caused by security issues when the requested domain and the responding domain are different. Is that so?
Anyway, I saw the information to enter "Access-Control-Allow-Origin": "*" in the request header, but it didn't work.
So I searched for more information. As a result, I created an express server and configured the proxy for the vue project as shown below.
//vue.config.js
module.exports = {
outputDir:"backend/public",
assetsDir:"assets",
configureWebpack: {
devtool: 'source-map'
},
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000/api',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
And I just applied the basic example code provided by the api site to the default express environment.
The only thing that changed
Not requested from front-end. (A request was made at back-end (express).)
I used the request module, not axios.
Why doesn't a CORS error occur when I make an api request on back-end (express)?
According to MDN, CORS is a mechanism to add security to requests and data transfers between cross-origin browsers and servers, so it won't affect by back-end and proxy servers.
Modern browsers use CORS in APIs such as XMLHttpRequest or Fetch to
mitigate the risks of cross-origin HTTP requests.