search
HomeOperation and MaintenanceNginxNginx configuration cross-domain request error Access-Control-Allow-Origin * How to solve

Preface

When a 403 cross-domain error occurs no 'access-control-allow-origin' header is present on the requested resource, you need to give nginx server configuration response header parameters:

1. Solution

You only need to configure the following parameters in the nginx configuration file:

location / { 
 add_header access-control-allow-origin *;
 add_header access-control-allow-methods 'get, post, options';
 add_header access-control-allow-headers 'dnt,x-mx-reqtoken,keep-alive,user-agent,x-requested-with,if-modified-since,cache-control,content-type,authorization';

 if ($request_method = 'options') {
  return 204;
 }
}

The above configuration code can solve the problem. If you don’t want to study in depth, just look here =-=

2. Explanation

1. access-control-allow-origin

The server is not allowed to cross domain by default. After configuring `access-control-allow-origin *` for the nginx server, it means that the server can accept all request sources (origin), that is, it accepts all cross-domain requests.

2. access-control-allow-headers is to prevent the following errors:

request header field content-type is not allowed by access-control-allow-headers in preflight response.

This error indicates that the value of the current request content-type is not supported. In fact, it was caused by us initiating an "application/json" type request. This involves a concept: preflight request. Please see the introduction of "preflight request" below.

3. access-control-allow-methods is to prevent the following error:

content-type is not allowed by access-control -allow-headers in preflight response.

4. Add a 204 return to options to handle the error that nginx still refuses access when sending a post request

When sending a "preflight request", the method options needs to be used, so the server needs to allow this method.

3. Preflight request

In fact, the above configuration involves a w3c standard: cros, the full name is cross-domain resource sharing (cross -origin resource sharing), which was proposed to solve cross-domain requests.

The cross-domain resource sharing (cors) standard adds a new set of http header fields that allow the server to declare which origin sites have permission to access which resources. In addition, the specification requires that for those http request methods that may have side effects on server data (especially http requests other than get, or post requests with certain mime types), the browser must first use the options method to initiate a preflight request ( preflight request) to learn whether the server allows the cross-domain request. After the server confirms permission, it initiates the actual http request. In the return of the preflight request, the server can also notify the client whether it needs to carry identity credentials (including cookies and http authentication related data).

In fact, requests with the content-type field of application/json are the above-mentioned post requests with certain mime types. Cors stipulates that content-type does not belong to the following mime types. , all belong to preflight requests:

application/x-www-form-urlencoded
multipart/form-data
text/plain

So the application/json request will add a "preflight" request before formal communication. This "preflight" request will bring header information access-control-request-headers: content-type:

options /api/test http/1.1
origin: http://foo.example
access-control-request-method: post
access-control-request-headers: content-type
... 省略了一些

When the server responds, if the returned header information does not contain access-control-allow-headers: content-type, it means that non-default content-type is not accepted. That is, the following error occurs:

request header field content-type is not allowed by access-control-allow-headers in preflight response.

The above is the detailed content of Nginx configuration cross-domain request error Access-Control-Allow-Origin * How to solve. For more information, please follow other related articles on the PHP Chinese website!

Statement
This article is reproduced at:亿速云. If there is any infringement, please contact admin@php.cn delete
NGINX Unit's Advantages: Flexibility and PerformanceNGINX Unit's Advantages: Flexibility and PerformanceApr 20, 2025 am 12:07 AM

NGINXUnit improves application flexibility and performance with its dynamic configuration and high-performance architecture. 1. Dynamic configuration allows the application configuration to be adjusted without restarting the server. 2. High performance is reflected in event-driven and non-blocking architectures and multi-process models, and can efficiently handle concurrent connections and utilize multi-core CPUs.

NGINX vs. Apache: Performance, Scalability, and EfficiencyNGINX vs. Apache: Performance, Scalability, and EfficiencyApr 19, 2025 am 12:05 AM

NGINX and Apache are both powerful web servers, each with unique advantages and disadvantages in terms of performance, scalability and efficiency. 1) NGINX performs well when handling static content and reverse proxying, suitable for high concurrency scenarios. 2) Apache performs better when processing dynamic content and is suitable for projects that require rich module support. The selection of a server should be decided based on project requirements and scenarios.

The Ultimate Showdown: NGINX vs. ApacheThe Ultimate Showdown: NGINX vs. ApacheApr 18, 2025 am 12:02 AM

NGINX is suitable for handling high concurrent requests, while Apache is suitable for scenarios where complex configurations and functional extensions are required. 1.NGINX adopts an event-driven, non-blocking architecture, and is suitable for high concurrency environments. 2. Apache adopts process or thread model to provide a rich module ecosystem that is suitable for complex configuration needs.

NGINX in Action: Examples and Real-World ApplicationsNGINX in Action: Examples and Real-World ApplicationsApr 17, 2025 am 12:18 AM

NGINX can be used to improve website performance, security, and scalability. 1) As a reverse proxy and load balancer, NGINX can optimize back-end services and share traffic. 2) Through event-driven and asynchronous architecture, NGINX efficiently handles high concurrent connections. 3) Configuration files allow flexible definition of rules, such as static file service and load balancing. 4) Optimization suggestions include enabling Gzip compression, using cache and tuning the worker process.

NGINX Unit: Supporting Different Programming LanguagesNGINX Unit: Supporting Different Programming LanguagesApr 16, 2025 am 12:15 AM

NGINXUnit supports multiple programming languages ​​and is implemented through modular design. 1. Loading language module: Load the corresponding module according to the configuration file. 2. Application startup: Execute application code when the calling language runs. 3. Request processing: forward the request to the application instance. 4. Response return: Return the processed response to the client.

Choosing Between NGINX and Apache: The Right Fit for Your NeedsChoosing Between NGINX and Apache: The Right Fit for Your NeedsApr 15, 2025 am 12:04 AM

NGINX and Apache have their own advantages and disadvantages and are suitable for different scenarios. 1.NGINX is suitable for high concurrency and low resource consumption scenarios. 2. Apache is suitable for scenarios where complex configurations and rich modules are required. By comparing their core features, performance differences, and best practices, you can help you choose the server software that best suits your needs.

How to start nginxHow to start nginxApr 14, 2025 pm 01:06 PM

Question: How to start Nginx? Answer: Install Nginx Startup Nginx Verification Nginx Is Nginx Started Explore other startup options Automatically start Nginx

How to check whether nginx is startedHow to check whether nginx is startedApr 14, 2025 pm 01:03 PM

How to confirm whether Nginx is started: 1. Use the command line: systemctl status nginx (Linux/Unix), netstat -ano | findstr 80 (Windows); 2. Check whether port 80 is open; 3. Check the Nginx startup message in the system log; 4. Use third-party tools, such as Nagios, Zabbix, and Icinga.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft