1. Overview
Cross-Origin Resource Sharing (CORS, Cross-Origin Resource Sharing) is a mechanism that allows web page resources under one domain name to be accessed by web pages from another domain name.
This is very common in modern web development, as the front-end and back-end are usually hosted on different servers. However, by default, browsers block cross-domain requests, causing developers to encounter cross-domain issues when implementing front-end and back-end separation.
This article will solve this problem through Nginx and explain the steps in detail, which is suitable for beginners who are new to Nginx and CORS.
2. What is CORS?
CORS is a browser security mechanism used to determine whether a web application can request resources across domains.
By setting specific HTTP headers, the server can allow specific domain names to access resources.
3. Common cross-domain scenarios
Assume your front-end application is hosted in, while the backend API service is hosted in。
When the current end tries to get data from the backend, if CORS is not configured correctly, the browser will block this request.
4. How to solve CORS problem in Nginx?
As a high-performance HTTP and reverse proxy server, Nginx can solve CORS problems with simple configuration.
Here is a basic Nginx configuration example for handling simple CORS requests.
5. Basic configuration
1. Edit Nginx configuration file
Find your Nginx configuration file, usually located in/etc/nginx/or/etc/nginx//。
2. Add CORS configuration
Add the following configuration in the server block:
server {
listen 80;
server_name ;
location / {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Origin, Authorization, Content-Type, Accept, X-Requested-With';
# If the request method is OPTIONS, then the 204 status code will be returned directly if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Origin, Authorization, Content-Type, Accept, X-Requested-With';
return 204;
}
proxy_pass http://backend_server;
}
}Here, we did a few things:
-
Access-Control-Allow-Origin: Allow requests from any source. You can
*Replace with a specific domain name to limit the source of the request. - Access-Control-Allow-Methods: Specify the allowed HTTP method.
- Access-Control-Allow-Headers: Specifies the custom header field that can be used in the request.
- OPTIONS Request Processing: When the browser sends certain requests, it will first send a pre-flight request (OPTIONS). We will directly return the 204 status code here without doing any processing.
3. Reload Nginx
After the configuration is complete, save the file and reload the Nginx configuration:
sudo nginx -s reload
6. Illustration process
The following is a flowchart for Nginx to process CORS requests:
+-------------------+ +---------------------+
| Browser (Frontend)| | Nginx Server |
+-------------------+ +---------------------+
| |
| 1. Request API |
|------------------------->|
| |
| 2. Check CORS Headers |
|<-------------------------|
| |
| 3. Response with Data |
|<-------------------------|
| |
+-------------------+ +---------------------+7. Further optimization
For complex cross-domain requests, more complex configurations may be required.
For example, if you only want to allow specific domain names to access the API, you canAccess-Control-Allow-OriginThe value of Uncategorized is set to the specified domain name.
add_header 'Access-Control-Allow-Origin' '';
8. Summary
Through the above configuration, you can already easily deal with CORS problems with Nginx.
This is a common requirement in handling front-end and back-end separation projects.
By understanding CORS and Nginx configurations, you can better meet challenges in actual development.
9. Frequently Asked Questions
Q: Why does my configuration not take effect?
A: Please check that Nginx loads the configuration file correctly and there are no typos. You can pass the commandnginx -tTo test the syntax of the configuration file.
Q: Can I allow multiple domain names?
A: Yes, but dynamic settings are requiredAccess-Control-Allow-Originheader, this usually needs to be handled in backend code.
The above is personal experience. I hope you can give you a reference and I hope you can support me more.