User-1948686155 posted
I need help on how to fix the cors policy blockage issue after deploying my web api app to the web host server. Let me layout the details. First, this is what I've got on my console.
Access to XMLHttpRequest at ’http://localhost:44347/api/Home/UserLogIn’ from origin ’http://myhostdomain.com’ has been blocked by CORS policy: The ‘Access-Control-Allow-Origin’ header has a value ’http://myhostdomain.com’
that is not equal to the supplied origin.
I used asp.net web api as my backend and vue.js on my front end and my web api project url under its properties is http://localhost:44347/.
So on my local machine which just works fine, I normally makes a server request something like this in my vue.js.
await axios.get('http://localhost:44347/api/SendMessages/CheckExistingConversation', {
params: {
//...your params here
}
}).then(res => this.conversation = res.data).catch(error => console.log(error));
On my WebApiConfig.cs, I have something like this
// Enable CORS for the Vue App...
var cors = new EnableCorsAttribute("http://localhost:8080", "*", "*");
config.EnableCors(cors);
which again all works fine on my local before I deploy it. So before I published and deployed them, I updated my WebApiConfig.cs to this
// Enable CORS for the Vue App...
var cors = new EnableCorsAttribute("http://myhostdomain.com", "*", "*");
config.EnableCors(cors);
but still got a cors policy issue. What did I still missed from this? I hope anybody can guide me on this issue. Really need help on this. Thanks.