Shulou(Shulou.com)05/31 Report--

This article "Nginx how to solve WebApi cross-domain secondary request and Vue single page problem" article knowledge point most people do not understand, so Xiaobian to everyone summarized the following content, detailed content, clear steps, has a certain reference value, I hope you can read this article to gain, let's take a look at this article "Nginx how to solve WebApi cross-domain secondary request and Vue single page problem" article bar.

I. Foreword

Because the project is front-end separation, api interface and web front-end deployment in different sites, so in the previous webapi ajax cross-domain request solution (cor implementation) using cross-domain processing rather than jsonp way.

However, after a period of time, I found a very strange problem. Every time the frontend initiates a request, the developer tool of the browser can see that there are two requests for the same url under the network. The method of the first request is options, and the method of the second request is the real get or post. Moreover, the first request returns no data, and the second request returns normal data.

II. Reasons

The first options request is triggered by the web server handling cross-domain access. options is a kind of pre-check request. When the browser processes the request for cross-domain access, if it judges 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 judges whether the server allows the request. If the web server supports cross-domain access in the form of cors, this preflight request is inevitable when processing complex requests.

Because our web server uses cors to solve the problem of cross-domain access, and adds custom parameters to the header and uses json format for data interaction, each request is a complex request, resulting in two requests per request.

The reasons are as follows:

Solving cross-domain problems with cor

III. Solutions

3.1 nginx

3.1.1 Thinking

Deploy front-end projects in nginx and solve cross-domain requests by proxy

3.1.2 Implementation

3.1.2.1 Install nginx

Install nginx under windows is the easiest, download the compressed package directly, and then extract it

3.1.2.2 Configure nginx

It comes with default configuration. If you want to deploy single-page applications such as vue and angular, put the packaged index.html file and dist directory into the publication directory, copy the path, and configure the nginx service pointing.

The configuration file is as follows:

server { listen 9461; #listen port number server_name localhost 192.168.88.22; #access address location / { root project path; #e.g.: e:/publish/xxx/; index index.html; #used here to handle vue, angular, react rewrite problems when using h5 history if (!- e $request_filename) { rewrite ^(.*) /index.html last; break; } } #proxy server 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 whether the 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 cause problems that the page cannot be found, so you need to rewrite the url address to index.html.

careful

When using url rewriting in nginx, it always reports the following error:

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

3.2 other

3.2.1 Thinking

Since precheck requests are being sent, can you reduce the number of precheck requests?

For example, you can set a validity period, within which you will not repeat the pre-check.

3.2.2 Implementation

You can fix this by adding an access-control-max-age request header after previewing at the server.

3.2.3 cor 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

The access-control-allow-headers field is required if the browser request includes an access-control-request-headers field.

It is also a comma-separated string indicating all header fields supported by the server, not limited to fields requested by the browser in "preflight."

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 precheck request in seconds. In the above result, the validity period is 20 days (1728000 seconds), which allows caching of the response for 1728000 seconds (20 days), during which time no further pre-check request is issued.

access-control-allow-methods: get, post, putaccess-control-allow-headers: x-custom-headeraccess-control-allow-credentials: trueaccess-control-max-age: 1728000 The above is about "Nginx how to solve WebApi cross-domain secondary requests and Vue single page problems" The content of this article, I believe everyone has a certain understanding, I hope the content shared by Xiaobian is helpful to everyone, if you want to know more related knowledge content, please pay attention to 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.