No 'Access-Control-Allow-Origin' header is present on the requested resource. 403 forbidden

1
votes

Access to XMLHttpRequest at 'http://localhost:8080/spring-mvc-restfull-crud-example/adduser' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I have installed the cors onto my workspace. even enabled in spring controller. And the same code were working before and suddenly it started giving this error

403 forbidden

1
angularspring-mvc
check this: stackoverflow.com/questions/13421463/… – Nobady
it's an CORS error. you should learn more about cors What Is CORS. You must change server properties to access api. – Cem Kocagöz
install google CORS extension then try to access localhost – kashif
@kashif That's not a solution Would you expect your client and customer to install CORS extension ?? During development proxying support can be utilized and eventually you need to configure your server to accept the application's requests. – Vikas
Share the code where you have enabled CORS How to create a Minimal, Reproducible Example – Vikas

1 Answers

0
votes

From Docs

Angular developers may encounter a cross-origin resource sharing error when making a service request (typically a data service request) to a server other than the application's own host server. Browsers forbid such requests unless the server permits them explicitly.

There isn't anything the client application can do about these errors. The server must be configured to accept the application's requests. Read about how to enable CORS for specific servers at enable-cors.org

To enable CORS on Spring you can refer CORS with Spring

Alternate Approach
Proxy To Backend Setup

Setup a proxy for API calls for your Angular CLI app

"/api/*": {
      "target": "https://localhost:8000",
      "secure": false,
      "logLevel": "debug",
      "pathRewrite": {
        "^/api": ""
      },
      "changeOrigin": true
    }
  1. "api/*":
    All requests made to /api/ from within your application will be forwarded to target": "https://localhost:8000/api

  2. "secure": false,:
    A backend server running on HTTPS with an invalid certificate will not be accepted by default. If you want to, you need to set secure: false.

  3. "logLevel": "debug"
    To help debug whether or not your proxy is working properly, you can also add the logLevel option as follows: Possible options for logLevel include debug, info, warn, error, and silent (default is info).

  4. "pathRewrite": { "^/api": "" }, pathRewrite setting says that if the path matches ^/api (i.e. if it starts with /api) then rewrite that portion with the empty string (i.e. remove it from the path), so all the request to https://localhost:8000/api will go to https://localhost:8000

  5. "changeOrigin": true: If you need to access a backend that is not on localhost or when you’re using some virtual proxies (such as configured with Apache2) on your backend set it to true.

  6. `target:

proxy options provided in this package is from underlying node-http-proxy

Proxying Support might help you to get rid off some CORS exceptions during the development stage but There isn't much the client application can do about these exceptions The server must be configured to accept the application's requests.
I want to add CORS support to my server

NOTE:

The proxy configuration is intended to proxy calls when running the dev server via ng serve. After you run ng build you are responsible for the web server and its configurations.