Nginx resolves Webapi cross-domain two request instances

This article mainly for you to share an Nginx solution Webapi cross-domain two requests and Vue single page problem, has a very good reference value, I hope to be helpful to everyone. Follow the small series together to see it, hope to help everyone.

First, preface

Since the project is a front-end separation, the API interface and the Web front-end are deployed in different sites, so in the previous article Webapi Ajax cross-domain request resolution (Cors implementation) uses cross-domain processing instead of JSONP.

However, after a period of time, found a very strange problem, every time the front-end request, through the browser's developer tools can see in the network below a URL has two requests, the first request method is options, The second request method is the real get or post, and the first request has no data to return, the second request will return the normal data.

Second, the reason

The first options request is caused by the Web server handling cross-domain access. Options is a preflight request, when the browser handles requests for cross-domain access, if the request is a complex request, a preflight request is sent to the server, and the browser determines whether the server is allowed to access the request, based on what the server returns. If a Web server uses Cors to support cross-domain access, this preflight request is unavoidable when dealing with complex requests.

Because our web server uses Cors to solve cross-domain access problems, adding custom parameters in the header and using JSON format for data interaction, each of our requests is a complex request, resulting in two requests per request.

The reasons are as follows:

Using Cors to troubleshoot cross-domain issues

Third, the solution

3.1 Nginx

3.1.1 Ideas

Deploying front-end projects in Nginx, resolving cross-domain request issues through proxies

3.1.2 Implementation

3.1.2.1 Installing Nginx

Installing Nginx under Windows is the simplest, download the compressed package directly, then unzip

3.1.2.2 Configuration Nginx

Has its own default configuration, such as to deploy Vue, angular such a single-page application, the packaged index.html file and the Dist directory into the publishing directory, the path is copied to configure the Nginx service to point

The configuration file is as follows:

server {listen 9461; # Listener Port number server_name localhost 192.168.88.22; # Access address location/{root project path; # for example: e:/publish/xxx/; in Dex index.html;  # This is used to work with Vue, Angular, React when using H5 's history When overriding the problem if (!-e $request _filename) {rewrite ^ (. *)/index.html last;  # Proxy service-side interface Location/api {proxy_pass http://localhost:9460/api;# Proxy interface Address}}

3.1.2.3 Nginx Common Commands

Start: Start Nginx

Reload configuration: Nginx-s Reload

Reopen log file: Nginx-s reopen

Test configuration file is correct: nginx-t [Optional: Specify path]

Quick Stop: Nginx-s stop

Ordered stop: Nginx-s quit

3.1.3 Nginx single page application H5 history URL Rewrite

Support

Vue, Angular, React

Reason

When implementing a single page, refreshing the page will result in problems that the page cannot find, so you need to rewrite the URL address into index.html.

Watch out.

In the use of Nginx URL rewrite, the error has been as follows

After checking, find if and (there must be a space between.)

3.2 Other

3.2.1 Ideas

If you want to send a preflight request, can I reduce the number of preflight requests?

For example, you can set a validity period to no longer repeat the preflight during the validity period.

3.2.2 Implementation

This problem can be resolved by adding a Access-control-max-age request header after the pre-check is completed at the service end.

3.2.3 CORS Response Field Description

Access-control-allow-methods

This field is required, and its value is a comma-delimited string that indicates the method that the server supports for all cross-domain requests.

Note that all supported methods are returned, not just the one requested by the browser. This is to avoid multiple "preflight" requests.

Access-control-allow-headers

If the browser request includes the Access-control-request-headers field, the Access-control-allow-headers field is required.

It is also a comma-delimited string that indicates all header information fields supported by the server, not limited to the fields requested by the browser in preflight.

Access-control-allow-credentials

This field has the same meaning as a simple request.

Access-control-max-age

This field is optional to specify the validity period for this preflight request, in seconds. In the result, the validity period is 20 days (1.728 million seconds), which allows the cache to be cached for 1.728 million seconds (that is, 20 days), during which time there is no need to issue another preflight request.

Access-control-allow-methods:get, POST, Putaccess-control-allow-headers: x-custom-headeraccess-control-allow-credentials:trueaccess-control-max-age:1728000