0

i use a proxy.config.json when running the dev server 

 "/api": {
        "target": "http://localhost:8080",
        "secure": false,
        "loglevel": "debug",
        "changeOrigin": true
    },
    "/login": {
    "target": "http://localhost:8080",
    "secure": false,
    "loglevel": "debug",
    "changeOrigin": true
}

but after the build i can't consume my rest api i tried to use the environement.ts but i got this error 

Access to XMLHttpRequest at 'http://localhost:8080/login' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

any solution for that ( not on server side ) ?

Hamza Bouallegue
  • 31
  • 7
  • Does this answer your question? [Cross Origin Resource Sharing (CORS) in Angular or Angular 6. Problem while you make cross domain calls on localhost with different ports](https://stackoverflow.com/questions/53528643/cross-origin-resource-sharing-cors-in-angular-or-angular-6-problem-while-you) – Maihan Nijat Jan 24 '20 at 15:01
  • 2
    You can only use angular proxies while using ng serve – nullptr.t Jan 24 '20 at 15:12
  • Your question is quite unclear. First, you talk about a production build, but your error says that you're serving the app from port 4200, which would indicate that you use ng serve. Are you? If so, how is the production build relevant to the question. Second: you talk about a proxy configuration, which would allow the ng serve server at port 4200 to transfer requests to the server running on port 8080, but the error indicates that you're sending the requests directly to the server on port 8080, thus bypassing the proxy server. – JB Nizet Jan 24 '20 at 15:27
  • So, what are you really doing? How do you serve the app? What is the code sending the requests. What is the URL where you send those requests? – JB Nizet Jan 24 '20 at 15:30
  • @JBNizet after ng build prod i got this error polyfills-es2015.457b6c53f910c910fffc.js:1 POST http://127.0.0.1:8081/login 405 (Method Not Allowed) – Hamza Bouallegue Jan 24 '20 at 15:45
  • You're not making your question clearer by refusing to answer our questions. That won't help your case. – JB Nizet Jan 24 '20 at 15:46
  • ok i m trying to be cleare ! on ng serve i use the proxy.config.json after ng build prod i can't consume my rest api cause the proxy config is only used with ng serve so i put my url targuet " login = http://localhost:8080 " on environement.ts and i rebuild the project and run it on http-server -o when i try to log in i got this error polyfills-es2015.457b6c53f910c910fffc.js:1 POST 127.0.0.1:8081/login 405 (Method Not Allowed) i hope that you understand me – Hamza Bouallegue Jan 24 '20 at 15:54
  • But why use http-server to serve your app in the first place? Use ng serve during development, and use your real web server, which hosts your rest services, to also host the application in production. And if you can't do that, then of course you'll also need a reverse proxy or you'll need to configure CORS on your beckend. – JB Nizet Jan 24 '20 at 17:27

1 Answers1

0

First of all Angular proxy is only for ng serve, in ng build it doesn't work

You have two solutions

Solution 1

if your backend api is hosted on same server under the web hosting you can do something like this

return this.http.post<Client>('/api/client/profile', { id: id})

In this case if your web address is {urwebsiteurl}/web then your api should be hosted {urwebsiteurl}/web/api

Then since you local running on 4200 and you can't make that configuration on your local you will be suing proxy like

{
    "/api/": {
        "target": "https://localhost:8443/", // the address of your local api
        "secure": false,
        "changeOrigin": false,
        "logLevel": "debug"
    }
}

Solution 2

add the apiUrl to you environment.ts and environment.prod.ts and use that value in your service and not using proxy

Reza
  • 15,335
  • 4
  • 62
  • 120