The 'Access-Control-Allow-Origin' header has a value 'http://localhost:4200' that is not equal to the supplied origin
Let's assume your api runs on 8080 and your angular code on 4200.
In your angular app create a file called proxy.conf.json
{ "/api/": { "target": "http://localhost:8080/", "secure": false, "changeOrigin": true }}
Start angular app using this command
ng serve --port 4200 --proxy-config proxy.conf.json
With this configuration when you call localhost:4200/api you it will call 8080 and it won't have any CORS error
i think you using web.php for this routes on the top of the file please use this and try
<?php header('Access-Control-Allow-Origin: *'); header('Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE'); header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization, X-CSRF-Token");Route::get('/login', 'Auth\LoginController@showLoginForm');
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.