Shulou(Shulou.com)06/01 Report--

Editor to share with you how Nginx solves the problem of WebApi cross-domain secondary request and Vue single page, I believe most people don't know much about it, so share this article for your reference. I hope you will get a lot after reading this article. Let's learn about it together.

I. Preface

Because the front and back ends of the project are separated, and the API interface and the Web front end are deployed in different sites, the WebApi Ajax cross-domain request resolution (CORS implementation) is handled in a cross-domain way instead of Jsonp in the previous article.

However, after a period of time, a very strange problem was found. Every time the frontend initiates a request, you can see through the developer tool of the browser that there are two requests for the same url under Network. The Method of the first request is OPTIONS, and the Method of the second request is the real Get or Post. Moreover, the second request returns normal data only if the first request has no data returned.

Second, the reason

The first OPTIONS request is raised by the WEB server handling cross-domain access. OPTIONS is a pre-check request. When dealing with a request for cross-domain access, if the browser determines that the request is a complex request, it will first send a pre-check request to the server. According to the content returned by the server, the browser determines whether the server allows access to the request. If the WEB server supports cross-domain access in the way of CORS, this pre-check request is inevitable when dealing with complex requests.

Because our WEB server uses CORS to solve the problem of cross-domain access, while adding custom parameters to header and using json format for data exchange, each request is a complex request, resulting in the phenomenon that two requests are sent each time.

The reasons are as follows:

Using CORS to solve cross-domain problems

III. Solutions

3.1 Nginx

3.1.1 ideas

Deploy the front-end project in Nginx, and solve the cross-domain request problem by proxy.

3.1.2 implementation

3.1.2.1 install Nginx

It is the easiest to install Nginx under Windows. Download the compressed package directly, and then decompress it.

3.1.2.2 configuring Nginx

It has its own default configuration. If you want to deploy single-page applications such as Vue and Angular, put the packaged index.html file and dist directory in the release directory and copy the path to configure the Nginx service to point to

The configuration file is as follows:

Server {listen 9461; # listener port number server_name localhost 192.168.88.22; # access address location / {path to the root project; # for example: eGroupPublishUnix; index index.html; # this is used to deal with Vue, Angular, React rewriting problems if (!-e $request_filename) {rewrite ^ (. *) / index.html last; break when using H5's History }} # proxy server interface location / api {proxy_pass http://localhost:9460/api;# proxy interface address}

3.1.2.3 Common Nginx commands

Launch: start nginx

Reload configuration: nginx-s reload

Reopen the log file: nginx-s reopen

Test whether the configuration file is correct: nginx-t [optional: specify path]

Quick stop: nginx-s stop

Orderly 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 cause problems that the page cannot be found, so you need to rewrite the Url address to the index.html.

Pay attention

When using URL rewriting in Nginx, the error is always reported as follows

After checking, it is found that there must be a space between if and (.

3.2 Other

3.2.1 ideas

Since you want to send pre-check requests, can you reduce the number of pre-check requests?

For example, you can set a period of validity in which there is no repetition of pre-checks.

3.2.2 implementation

An Access-Control-Max-Age request header can be added to solve this problem after the pre-check on the server side is completed.

3.2.3 CORS response field description

Access-Control-Allow-Methods

This field is required, and its value is a comma-separated string indicating all cross-domain request methods supported by the server.

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

Access-Control-Allow-Headers

If the browser request includes an Access-Control-Request-Headers field, the Access-Control-Allow-Headers field is required.

It is also a comma-separated string indicating that all header information fields supported by the server are not limited to those requested by the browser in pre-check.

Access-Control-Allow-Credentials

This field has the same meaning as in a simple request.

Access-Control-Max-Age

This field is optional and is used to specify the validity period of this pre-inspection request (in seconds). In the above result, the validity period is 20 days (1728000 seconds), which allows the response to be cached for 1728000 seconds (that is, 20 days), during which there is no need to issue another pre-check request.

Access-Control-Allow-Methods: GET, POST, PUTAccess-Control-Allow-Headers: X-Custom-HeaderAccess-Control-Allow-Credentials: trueAccess-Control-Max-Age: 1728000 are all the contents of this article entitled "how to solve the problem of WebApi cross-domain secondary request and Vue single page by Nginx". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.