The Same Origin Policy disallows reading the remote resource at (Reason: CORS header ‘Access-Control-Allow-Origin’ missing) - vue.js

Question

I have a CORS problem that I believe had all settings configured correctly. The request passed OPTIONS preflight without a problem but the POST request has a CORS issue of CORS header ‘Access-Control-Allow-Origin’ missing. I have no idea why this would happen as other GET request and OPTIONS request are working fine. The api requires a Cookie and X-X-XSRF-TOKEN. And I can access these api data in POSTMAN.
Is it because of the request payload?
My Chrome Error:
Access to XMLHttpRequest at 'http://example.com:8080/login' from origin 'http://example.com' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
I have added:
axios.defaults.withCredentials = true
axios.defaults.crossDomain = true
My post request:
async submitLogin() {
const headers = { "Content-Type": "multipart/form-data" };
const formData = new FormData();
formData.append("username", "example1");
formData.append("password", "example1");
axios
.post("http://example.com:8080/login", formData, {
headers: headers,
})
.then(function (response) {
console.log(response);
});
},
My Tomcat web.xml Config:
<filter>
<filter-name>CorsFilter</filter-name>
<filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
<init-param>
<param-name>cors.allowed.origins</param-name>
<param-value>http://example.com</param-value>
</init-param>
<init-param>
<param-name>cors.allowed.methods</param-name>
<param-value>GET,POST,HEAD,DELETE,PUT,OPTIONS</param-value>
</init-param>
<init-param>
<param-name>cors.allowed.headers</param-name>
<param-value>Cache-Control,Accept-Language,Accept-Encoding,x-requested-with, Content-Type, origin, authorization, Accept,Content-Length, Connection,Referer,client-security-token,Access-Control-Allow-Credentials,Cookie,Authorization,Content-Type,X-Requested-With,accept,X-XSRF-TOKEN,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
</init-param>
<init-param>
<param-name>cors.exposed.headers</param-name>
<param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
</init-param>
<init-param>
<param-name>cors.support.credentials</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>cors.preflight.maxage</param-name>
<param-value>10</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CorsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
Successfully passed OPTIONS Preflight Request
Request Header

Answer 1

Try modifying your web.xml config's cors.allowed.origins param to *.
You're generally pretty safe with GET requests unless the receiving server's settings are strict — GETs aren't discriminated against in the CORS universe in the same way POST requests are. That may be why you're noticing the discrepancy you mentioned. Postman also doesn't face the same restrictions that a browser does.
If changing cors.allowed.origins doesn't work, try inspecting the error message in the devtools console in more than one browser; sometimes one browser is more specific than the next and will point you in the right direction.