-1

i am trying to make a post request to URL = "https://sambhav.daily.co/v1/rooms" but i am receiving the error blocked by cors policy

addRoom(): Observable<any> {
    const headers = new HttpHeaders()
      .set("content-type", "application/json")
      .set("Access-Control-Allow-Origin", "http://localhost:8000")
      .set("Access-Control-Allow-Methods", "GET,POST,PATCH,DELETE,PUT,OPTIONS")
      .set(
        "Access-Control-Allow-Headers",
        "Origin, Content-Type, X-Auth-Token, content-type"
      )
      .set(
        "Authorization",
        `Bearer <API-KEY>`
      );
    return this.http
      .post(URL, { headers: headers })
      .map((response: any) => response.data)
      .catch(this.handleError);
  }

the error i am receiving

Access to XMLHttpRequest at 'https://sambhav.daily.co/v1/rooms' from origin 'http://localhost:8000' 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.
sambhav jain
  • 11
  • 5
  • 1
    Update the code on your _server_ to allow requests from localhost:8000. Those `access-control-*` headers in your code are irrelevant because they're on the client. It's the server that needs to be returning those headers. – Roddy of the Frozen Peas Jul 08 '21 at 05:16
  • @RoddyoftheFrozenPeas i am using third party service daily and making post reques to it – sambhav jain Jul 08 '21 at 05:25
  • I am not sure but i can guess that you are doing development and want to develop against that server? what you have to do is to start the angular cli server with proxy.conf.json, check this - https://angular.io/guide/build#proxying-to-a-backend-server – Suresh Nagar Jul 08 '21 at 05:25
  • Note that if you do use the proxy config to work around the same-origin restrictions in the browser, you'll need to make sure that your production application still works as expected. Proxying is only provided in the webpack development server, which you should not be running in production. – Roddy of the Frozen Peas Jul 08 '21 at 05:33
  • Don't set `Access-Control-*` headers on the request. They are **response** headers! – Quentin Jul 08 '21 at 16:25
  • Voting to close this as a "typo" because the service provider has chipped into say that the URL is simply wrong. – Quentin Jul 08 '21 at 16:26

1 Answers1

5

Phil from Daily here.

I think the issue is the base URL for your request. All REST API calls use https://api.daily.co/v1/

So, in your case you want to send the POST to https://api.daily.co/v1/rooms.

If the docs are unclear, please let me know. We're in the process of revamping them right now and your input is valuable.

I would also suggest refreshing your API key, since you included it above.

Phil Miller
  • 136
  • 2
  • thank you phill for your support, i have figured out the issue. Is there a way to embed it in angular app? – sambhav jain Jul 09 '21 at 06:59
  • Do you mean the API key? You shouldn't use it in client side code since they it would be exposed to anyone who can view the source. The typical way to obfuscate it would be to have a server make the API call for you. Netlify redirect proxies (https://docs.netlify.com/routing/redirects/rewrites-proxies/#proxy-to-another-service) are an easy way to achieve this. We use them in this demo (https://github.com/daily-demos/fullscreen-prebuilt-ui). Feel free to reach out to our support team if you have any questions about this. – Phil Miller Jul 09 '21 at 13:08