I encountered a similar issue myself and after researching on jQuery documentation, I discovered the following:

When making cross-domain requests, using a content type other than

application/x-www-form-urlencoded

, multipart/form-data, or text/plain will prompt the browser to send a preflight OPTIONS request to the server.

Even though the server permits cross-origin requests, if it does not allow Access-Control-Allow-Headers, errors will be thrown. Angular's default content type is application/json, leading to an attempted OPTION request. To address this, either modify Angular's default header or enable Access-Control-Allow-Headers on the server side. Here's an example with Angular:

$http.post(url, data, {
    headers : {
        'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
    }
});

For those in need of a Java solution to address the same issue, here is some code I put together. Please note that this should only be used for development purposes. [Update] Avoid using the wildcard character *. Instead, consider using localhost if you require local functionality.

public class CustomCORSFilter implements Filter {

public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
    HttpServletResponse response = (HttpServletResponse) res;
    response.setHeader("Access-Control-Allow-Origin", "my-authorized-proxy-or-domain");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
    chain.doFilter(req, res);
}

public void init(FilterConfig filterConfig) {}

public void destroy() {}

}

To enable the correct header in PHP, use the following code:

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, X-Requested-With");

To ensure that the POST request is successfully received, the server must include the Content-Type header in its response.

Here are some common headers to include, along with a custom "X_ACCESS_TOKEN" header:

"X-ACCESS_TOKEN", "Access-Control-Allow-Origin", "Authorization", "Origin", "x-requested-with", "Content-Type", "Content-Range", "Content-Disposition", "Content-Description"

Your web server administrator should configure these settings for the server you are sending your requests to.

You may also ask them to make the "Content-Length" header visible.

They will recognize this as a Cross-Origin Resource Sharing (CORS) request and should be familiar with the necessary server configurations.

For more information, please visit:

• http://www.w3.org/TR/cors/
• http://enable-cors.org/

This code snippet has been tested and proven to work smoothly in a nodejs environment:

xServer.use(function(req, res, next) {
  res.setHeader("Access-Control-Allow-Origin", 'http://localhost:8080');
  res.setHeader('Access-Control-Allow-Methods', 'POST,GET,OPTIONS,PUT,DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type,Accept');

  next();
});

If you encounter issues with localhost and PHP, try implementing the following solution:

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Content-Type'); 

To prevent further issues from localhost, make sure to include the following in your front-end code:

{headers: {"Content-Type": "application/json"}}

By doing this, you can eliminate any problems associated with localhost!

When working with Asp Net Core, a quick way to set it up for development is to include the following code in the Configure method of the Startup.cs file:

app.UseCors(options => options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());

Attempting to set the headers in question is tantamount to tampering with response headers, which are exclusively server-side attributes. The responsibility of providing these headers lies solely with the server receiving the request.

There is no justification for setting these parameters on the client side. Allowing such a practice would render permission mechanisms meaningless, as sites could grant permissions they do not own rather than the actual data owners granting them.

In case you encounter this issue while using an express server, a quick fix is to include the following middleware:

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

When testing JavaScript requests for Ionic2 or AngularJS 2 on your Chrome browser, make sure to install the CORS plugin to allow cross-origin requests.

While get requests might work without the CORS plugin, post, put, and delete requests will require it for smooth testing. It's definitely not ideal, but I wonder how people manage without the CORS plugin.

Also, ensure that the JSON response is not returning a status code of 400.

We have encountered a backend issue that needs to be addressed. If you are utilizing the sails API on the backend, you will need to make changes to the cors.js file and specify your parameters in this section.

module.exports.cors = {
  allRoutes: true,
  origin: '*',
  credentials: true,
  methods: 'GET, POST, PUT, DELETE, OPTIONS, HEAD',
  headers: 'Origin, X-Requested-With, Content-Type, Accept, Engaged-Auth-Token'
};

When working with a web service method, I encounter a situation where multiple parameters are being received as @HeaderParam.

To handle these parameters effectively, it is necessary to declare them in the CORS filter in the following manner:

@Provider
public class CORSFilter implements ContainerResponseFilter {

    @Override
    public void filter(ContainerRequestContext requestContext, ContainerResponseContext responseContext) throws IOException {

        MultivaluedMap<String, Object> headers = responseContext.getHeaders();

        headers.add("Access-Control-Allow-Origin", "*");
        ...
        headers.add("Access-Control-Allow-Headers", 
        /*
         * The name of the @HeaderParam("name") should be specified here (as a raw String):
         */
        "name", ...);
        headers.add("Access-Control-Allow-Credentials", "true");
        headers.add("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD");   
    }
}

The error occurs when the request header field Access-Control-Allow-Origin is not permitted by Access-Control-Allow-Headers.

This indicates that the Access-Control-Allow-Origin field in the HTTP header is not being processed or allowed in the response. To resolve this issue, simply remove the Access-Control-Allow-Origin field from the request header.

To ensure proper access on my server, I made the necessary adjustments to the web.config file:

<system.webServer>
    <httpProtocol>
        <customHeaders>
            <add name="Access-Control-Allow-Origin" value="https://other.domain.com" />
            <add name="Access-Control-Allow-Methods" value="GET,POST,OPTIONS,PUT,DELETE" />
            <add name="Access-Control-Allow-Headers" value="Content-Type,X-Requested-With" />
        </customHeaders>
    </httpProtocol>
<system.webServer>

When encountering an issue with wildcard "*" for Access-Control-Allow-Headers in the web.config, I found a workaround that worked except for Safari and IE:

<add name="Access-Control-Allow-Headers" value="*" />

To address this, I had to manually specify all custom headers in the web.config:

<system.webServer>
    <httpProtocol>
        <customHeaders>
            <add name="Access-Control-Allow-Origin" value="https://somedomain.com" />
            <add name="Access-Control-Allow-Methods" value="GET,POST,OPTIONS,PUT,DELETE" />
            <add name="Access-Control-Allow-Headers" value="custom-header1, custome-header2, custome-header3" />
        </customHeaders>
    </httpProtocol>
<system.webServer>

Solution for running Angular on a different port than the API:

To make it work, I simply included a wildcard "*" in the Cors Options within the webapi builder.

builder.Services.AddCors(options =>
{

    options.AddPolicy(myAllowSpecificOrigins, policy => {
        policy.WithOrigins("https://localhost:4200", "http://localhost:4200");
        policy.WithHeaders("*"); 
    });
});