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

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.