Hi fellow developers, I'm currently facing an issue while trying to upload a simple app to my Herokuapp. Every time I attempt to log in or sign up and establish a connection with the back-end, I encounter the following CORS error:
"Access to fetch at '' from origin 'http://localhost:8080' 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."Both sign-in and sign-up attempts from the front end trigger this error. Upon seeing this, I tried adding an argument of some sort in the front-end header object, like so:
VUEX
const herokuUrl = "https://xxxxxxxxxxxxx.herokuapp.com/";
ACTION
getUserSignedUp({ commit, dispatch }, payload) {
// console.log(payload);
fetch(herokuUrl + "mini/all_product/registering", {
credentials: "include",
headers: {
"Content-Type": "application/json",
"mode":"Access-Control-Allow-Origin",----------------------->PUT THIS HERE
},
method: "POST",
body: JSON.stringify(payload),
})
.then((userData) => {
// console.log("data sent :", JSON.stringify(userData));
return userData.json();
})
.then((userData1) => {
if (userData1.Error) {
alert("fail on register", userData1);
commit("setUserAuth", false);
} else {
alert("Success", userData1);
dispatch("getUserLogIn", payload);
commit("setUserAuth", true);
}
})
.catch((error) => {
alert("error", error);
});
},
However, this approach did not work as expected.
I'm also attaching my backend application's CORS configuration below:
package com.miniAmazon;
import com.fasterxml.jackson.annotation.JsonFormat;
...
...
@Configuration
@EnableWebSecurity
class WebSecurityConfiguration extends GlobalAuthenticationConfigurerAdapter {
...
}
@Configuration
@EnableWebSecurity
class WebSecurityConfig extends WebSecurityConfigurerAdapter {
...
}
Any insights or advice on why this issue might be occurring? Thank you in advance for any help provided! Have a wonderful day!