有没有办法在 Azure 虚拟机上启用 CORS？

Question

Is there a way to enable CORS on an Azure Virtual Machine ? I am running a flask at localhost:5001 and angular app at localhost:4200 In my local environment, it woks perfectly. However, in the virtual machine instance on azure it doesn't work because I can't setup my CORS.

Answer 1

To enable CORS in azure , we need to configure a policy in APIs by following below steps.

1. Add the APIs required in the azure portal .

• Apply the below changes in your deployed application/applications in iis if not done alread in Web.config file.

 <system.webServer> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> <add name="Access-Control-Allow-Methods" value="GET,POST,OPTIONS" /> <add name="Access-Control-Allow-Headers" value="Content-Type" /> </customHeaders> </httpProtocol> </system.webServer>

To see how to go to web.config file you may refer this Link to Configure CORS in azure

2. Go to APIs >> click on all operations >> Add policy

- There you can see cors.Click on it.

- Then click on save

- You will need to navigate to the inbound policy and check if you have this element added.

• You can edit in form-editor directly or code-editor as below:

• This example demonstrates how to support pre-flight requests, such as those with custom headers or methods. To support custom headers and
  additional HTTP verbs, use the allowed-methods and allowed-headers
  sections as shown in the following example. - If your service supports CORs for any domain , you place “*” as shown below

(Or)

• If you want cors only few specific URIs to call your service you may add them in origin tag or you may directly fill the form by using form editor.You may add the methods that require for your service.

You may refer this Document for more information .

---

You may Enable the Access-Control-Allow-Credentials header. This is necessary whenever you need to send cookies or a token as part of calling your API >> Reference

---

(OR)

• In the Cloud Shell, enable CORS to your client's URL by using the az webapp cors add command. Replace the placeholder.

In AZURE CLI:

webapp cors add --resource-group myResourceGroup --name <app-name> --allowed-origins 'http://localhost:5000'

• You can set more than one client URL in properties.cors.allowedOrigins ("['URL1','URL2',...]"). You can also enable all client URLs with "['*']". You can refer this for more info regarding this.

Other references:

1. Troubleshoot CORS error
2. app-service-api-cors-consume
3. Code examples-CORS
4. App-service-web-tutorial-rest api
5. CORS proxy
6. Azure CDN with CORS