Bdtjtk

You can read more about that from here: http://www.html5rocks.com/en/tutorials/cors/.

Your resource methods won't get hit, so their headers will never get set. The reason is that there is what's called a preflight request before the actual request, which is an OPTIONS request. So the error comes from the fact that the preflight request doesn't produce the necessary headers.
check that you will need to add following in your .htaccess file:

Header set Access-Control-Allow-Origin "*"

I also had the same issue while using http://www.mocky.io/ what i did is to add in mock.io response header: Access-Control-Allow-Origin *

To add it there just need to click on advanced options

Once this is done, my application was able to retrieve the data from external domain.

Simply you can set in php file as

header("Access-Control-Allow-Origin: *");

header("Content-Type: application/json; charset=UTF-8");

Unfortunately, that's not an Angular2 error, that's an error your browser is running into (i.e. outside of your app).

That CORS header will have to be added to that endpoint on the server before you can make ANY requests.

I have spent lot of time for solution and got it worked finally by making changes in the server side.Check the website https://docs.microsoft.com/en-us/aspnet/core/security/cors

It worked for me when I enabled corse in the server side.We were using Asp.Net core in API and the below code worked

1) Added Addcors in ConfigureServices of Startup.cs

public void ConfigureServices(IServiceCollection services)

    {

        services.AddCors();

        services.AddMvc();

    }

2) Added UseCors in Configure method as below:

public void Configure(IApplicationBuilder app, IHostingEnvironment env)

    {

        app.UseCors(builder =>builder.AllowAnyOrigin());

        app.UseMvc();

    }

I also encountered the same problem and passed the following way to solve this problem.

step 1:

$ npm install --save-dev http-proxy-middleware

step 2:

add a proxy when i fetch web api, if you use lite-server you can add a file bs-config.js .

//file: bs-config.js

var proxyMiddleware = require('http-proxy-middleware');



module.exports = {

    server: {

        middleware: {

            1: proxyMiddleware('/example-api', {

                target: 'http://api.example.com',

                changeOrigin: true,

                pathRewrite: {

                '^/news-at-api': '/api'

                }

            })

        }

    }

};

hope this helps.

If you are creating a mock-up with SoapUI,a free testing tool for REST and SOAP request and response, for Angular 2+ application you should remember to set inside your http header request

 Access-Control-Allow-Origin :  *

I add two images for helping your insert.
The first shows the header you should add. If you want to add the header before you have to click the plus button(it's green).

The second image shows the insert the *. The value * permits to accept all the request from different hosts.

After this work my Angular application removed this annoying error in my console.

A big recourse that helped me to understand for creating my first mock up is this video. It will help you for creating a new mock-up inside SoapUi's environment without a server-side.

I had the same problem when I was practising Angular5. Then I came across https://spring.io/guides/gs/rest-service-cors/ which helped me to resolve the issue.

I have kept @CrossOrigin(exposedHeaders="Access-Control-Allow-Origin") on my request mapping method. We can also configure this globally in spring boot application.

Another simple way, without installing anything

1. 
   

   HTTP function

   
   
   

   authenticate(credentials) {
   
   
   
   let body = new URLSearchParams();
   
   body.set('username', credentials.username);
   
   body.set('password', credentials.password);
   
   
   
   return this.http.post(/rest/myEndpoint, body)
   
     .subscribe(
   
     data => this.loginResult = data,
   
     error => {
   
       console.log(error);
   
     },
   
     () => {
   
     // function to execute after successfull api call
   
     }
   
     );
   
    }
   
   

   
   


2. 
   

   Create a proxy.conf.json file

   
   
   

   {
   
    "/rest": {
   
   "target": "http://endpoint.com:8080/package/",
   
   "pathRewrite": {
   
     "^/rest": ""
   
   },
   
   "secure": false
   
   }
   
   }
   
   

   
   


3. 
   

   then ng serve --proxy-config proxy.conf.json (or)
   open package.json and replace

   
   
   

   "scripts": {
   
   "start": "ng serve --proxy-config proxy.conf.json",
   
    },
   
   

   
   

and then npm start

That's it.

Check here https://webpack.github.io/docs/webpack-dev-server.html for more options

I got the same error and here how I solved it, by adding the following to your spring controller:

@CrossOrigin(origins = {"http://localhost:3000"})

Most of the time this happens due to the invalid response type from server.

Make sure the following 2 to avoid this issue..

1. You don't need to set any CORS headers in Angular side. it very well know how to deal with it. Angular expects the return data to be in json format. so make sure the return type is JSON even for the OPTIONS request.


2. You Handle CORS in server side by using CORS header which is very self explanatory or you can google how to set CORS headers or middlewares.