Setting Up CORS (Cross-Origin Resource Sharing) for Your Website

What is CORS?

Cross-Origin Resource Sharing (CORS) is a mechanism based on HTTP headers that relaxes the restrictions on cross-origin requests imposed by browsers. In simple terms, when a web page (for example, one located at example.com) wants to request resources from a different domain (for example, api.example.net), the browser will block this request by default due to the same-origin policy. CORS allows the server to add specific headers in the response to inform the browser which origins are permitted to access the resources, thereby enabling safe cross-origin access.

Why Use CORS?

When your front-end application (e.g., a single-page application running on app.example.com) needs to fetch data from a back-end API (e.g., running on api.example.com), you will likely need to use CORS.

Detailed CORS Parameters

Here are some commonly used parameters in CORS and their functions:

1. Access-Control-Allow-Origin:

   • Function: Specifies the origins allowed to access the resource.
   • Values:
     • *: Allows requests from any origin (not recommended for production environments due to security concerns).
     • https://example.com: Only allows requests from https://example.com.
     • https://example.com https://www.example.net: Only allows requests from https://example.com and https://www.example.net.
   • Important Note: When a request includes an Authorization header, Access-Control-Allow-Origin cannot be set to *; it must be set to a specific domain, or the cross-origin request will fail.

2. Access-Control-Allow-Methods:

   • Function: Specifies the allowed HTTP methods (e.g., GET, POST, PUT, DELETE).
   • Values: For example: GET, POST, PUT, DELETE, OPTIONS
   • Important Note: If your request includes custom headers or uses PUT or DELETE, you must declare the OPTIONS method here. Otherwise, the browser will first send an OPTIONS preflight request, and if the response does not declare the allowed OPTIONS method, your request will fail.

3. Access-Control-Allow-Headers:

   • Function: Specifies the custom HTTP headers that can be used in requests from the client.
   • Values: For example: Content-Type, Authorization
   • Important Note: If your request includes custom headers, you must declare them here; otherwise, the browser will block your request.

4. Access-Control-Allow-Credentials:

   • Function: Whether to allow cross-origin requests to include cookies or HTTP authentication information.
   • Values: true or false.
   • Important Note: When set to true, the value of Access-Control-Allow-Origin cannot be a wildcard *.

Enabling and Configuring CORS in ServBay

ServBay provides an easy interface to configure your website's CORS settings. Here are the steps:

1. Select Website: In the left sidebar of the ServBay main interface, click on the “Website” option. From the list of websites, select the one for which you want to configure CORS.
2. Access CORS Configuration: In the website configuration screen, find the “CORS” section. By default, ServBay will have CORS disabled. You need to manually enable CORS by toggling the switch from “off” to “on”.
3. Configure Access-Control-Allow-Origin: In the Access-Control-Allow-Origin input box, enter the allowed domain names, separating multiple domains with spaces. For example: https://servbay.new https://www.servbay.com https://www.servbay.dev https://www.servbay.cn https://appleid.apple.com.
4. Configure Access-Control-Allow-Methods: In the Access-Control-Allow-Methods input box, enter the HTTP request methods you wish to allow. For example: GET, POST, PUT, DELETE, OPTIONS.
5. Configure Access-Control-Allow-Headers: In the Access-Control-Allow-Headers input box, enter the headers you wish to allow in requests. For example: Content-Type, Authorization.
6. Enable Allow-Credentials (optional): If you need to allow cross-origin requests to include cookies or authentication information, enable the Allow-Credentials toggle switch. Note that if you enable this option, the value of Access-Control-Allow-Origin cannot be set to the wildcard *.
7. Save Settings: After completing the configuration, click the "Save" button at the bottom right to apply your changes.

Example

Based on the screenshot above, the CORS configuration for the “ServBay Testing” website is as follows:

• Access-Control-Allow-Origin: https://servbay.new https://www.servbay.com https://www.servbay.dev https://www.servbay.cn https://appleid.apple.com
• Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
• Access-Control-Allow-Headers: Content-Type, Authorization
• Allow-Credentials: Enabled.

This means that requests from the above domains can access the resources on the servbay.new website, and can send requests using the GET, POST, PUT, DELETE, OPTIONS methods, while also carrying Content-Type and Authorization headers and cookie information.

Considerations

• Security: In production environments, avoid using wildcards * as the value for Access-Control-Allow-Origin.
• Caching: Browsers may cache CORS responses, so after changing CORS settings, you may need to clear the browser cache.
• Code Configuration: In some cases, in addition to configuring CORS on the web server, you may also need to configure CORS in your code (e.g., Laravel).
• Complex Scenarios: For more complex cross-origin scenarios, you may need to combine CORS with other techniques, such as JSONP or proxy servers.

By following the steps above, you can easily enable and configure CORS for your website in ServBay, ensuring your cross-origin requests can proceed smoothly.

I hope this document helps you better understand and utilize the CORS functionality of ServBay. Please feel free to ask any questions.