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?
Related
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.
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.
Ok, I hope I am not making a duplicate but my question is a bit different from most of the result for CORS questions.
I have springboot rest api backend and I have reactJs frontend using Axios.
on my API interface I added
#CrossOrigin(origins = {"http://localhost:3000", "http://localhost"})
#RequestMapping ...
...
Locally everything is running fine.
React running on http://localhost:3000
api running on http://localhost:8080/apixxx/orders
So I deployed them on my ubuntu server:
React running on http://12.123.12.123 (port is 80)
api running on http://12.123.12.123:8080 (postman requests are successful)
Now see, I put #CrossOrigin origin of "http://localhost" because that is for the deployed copy of my API, since relative to the server it is localhost.
Now I am getting:
Access to XMLHttpRequest at 'http://localhost:8080/apireq/v1/apiresourcexx' from origin 'http://12.123.12.123' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
this is the same error I get locally when I remove the #CrossOrigin.
I tried adding in the origins "http://12.123.12.123", "http://12.123.12.123:80", "http://myDomainName.com" (my domain name), "http://myDomainName.com:80".
Nothing works. Still the same error.
What I found works is:
#CrossOrigin(origins = {"*"})
But I dont want to do that....
Please help.
-----UPDATE-----
Ok, I am really confused now.
Apparently, I just realized that the axios routing I used is axios.post('http://localhost:8080/apixxx/orders', ...); And basically this will point to the springboot running on my local machine, not on the prod server. If that is the case, then each of my client will be different origin and all of them will be calling my API... If that is the case then the only solution is that one I am avoiding: #CrossOrigin(origins ="*")
Please advise. What do you guys usually do in this situaion.
Following https://github.com/SimulatedGREG/electron-vue, i run yarn run dev and make a minor change to see how it works.
In electron vue application, i have launch an ajax request in vue component created hook function,
created: function () {
let self = this
this.$http.get('http://example.com/api/hwid/383').then(
function (resp) {
self.title = resp.title
}
)
}
In the vue-electron dev tool, there are following error in the console:
XMLHttpRequest cannot load http://example.com/api/hwid/383. No 'Access- Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9080' is therefore not allowed access.
How to solve that?
Must i set the cross domain in the server side?
Yes, you should add Access-Control-Allow-Origin for localhost on the server side.
Since it's only a browser policy, you eventually can write your own (proxy) server which will get http://example.com/api/hwid/383 data. Then you will request data through your server without any issues.