The 'Access-Control-Allow-Origin' header has a value 'http://localhost:4200' that is not equal to the supplied origin

Question

(continuation of error message in title) \" Origin \'http://127.0.0.1:4200\' is therefore not allowed access.\"

I am unable to run the same Angular 5 site on two dif

Answer 1

You can set proxy for the request provided by the angular webpack developement server. By using the proxy you can change the backend URL as originated from the angular domain hosted URL. This will be achieved by --proxy-config in your serve command or package.json. so that angular will be run in different URls with same backend service.

add a file named proxy.conf.json near the package.json. from your Request get URL add /proxy

In your proxy.conf file add this

{
  "/proxy": {
  "target": "http://localhost:3000",
  "secure": false,
  "pathRewrite": {
  "^/proxy": ""
 }
}

change your serve command as

ng serve --proxy-config proxy.conf.json --port 4200 --host 0.0.0.0

or

in your angular.json change the serve target

"architect": {
    "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
    "browserTarget": "your-application-name:build",
    "proxyConfig": "proxy.conf.json"
 },

Note: make sure to add /proxy in your Http service URL and Proxy configuration in only for the development purpose

For the production environment You should configure in the webservers.