Home Operation and Maintenance Nginx How Nginx solves the problem of WebApi cross-domain secondary requests and Vue single page

How Nginx solves the problem of WebApi cross-domain secondary requests and Vue single page

May 22, 2023 pm 10:03 PM
vue nginx webapi

1. Foreword

Since the project is separated from the front and back ends, the api interface and the web front end are deployed in different sites, so in the previous article, the webapi ajax cross-domain request solution (cors implementation ) use cross-domain processing instead of jsonp.

But after a period of time, I discovered a very strange problem. Every time the front end initiates a request, through the browser's developer tools, I can see that there are two requests for the same URL under the network. The first The method of one 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.

2. Reason

The first options request is triggered by the web server processing cross-domain access. Options is a preflight request. When the browser processes a cross-domain access request, if it determines that the request is a complex request, it will first send a preflight request to the server. Based on the content returned by the server, the browser determines whether the server allows access. the request. If the web server uses CORS to support cross-domain access, this preflight request is inevitable when processing complex requests.

Because our web server uses cors to solve the problem of cross-domain access, and at the same time adds custom parameters in the header and uses json format for data interaction, each of our requests is a complex request. As a result, two requests are sent for each request.

The reasons are as follows:

Use cors to solve cross-domain problems

3. Solution

3.1 nginx

3.1.1 Idea

Deploy the front-end project in nginx and solve the cross-domain request problem through proxy

3.1.2 Implementation

3.1.2.1 Install nginx

It is easiest to install nginx under windows, download the compressed package directly, and then After decompression

3.1.2.2 Configure nginx

has its own default configuration. If you want to deploy single-page applications such as vue and angular, package the index.html Put the file and dist directory into the release directory, copy the path, and use it to configure the nginx service to point to the

configuration file as follows:

server {
 listen 9461; # 监听端口号
 server_name localhost 192.168.88.22; # 访问地址
 location / {
 root 项目路径; # 例如:e:/publish/xxx/;
 index index.html;
 
 # 此处用于处理 vue、angular、react 使用h5 的 history时 重写的问题
 if (!-e $request_filename) {
 rewrite ^(.*) /index.html last;
 break;
 }
 }
 
 # 代理服务端接口
 location /api {
 proxy_pass http://localhost:9460/api;# 代理接口地址
 }
 }
Copy after login

3.1.2.3 nginx common commands

Start: start nginx

Reload the 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 rewriting

Support

vue, angular, react

Reason

When implementing a single page, refreshing the page will cause the page not to be found, so you need to rewrite the url address to index.html.

Notes

When using url rewriting in nginx, the following error is always reported

How Nginx solves the problem of WebApi cross-domain secondary requests and Vue single page

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

3.2 other

##3.2.1 Idea

Since we want Is it possible to reduce the number of preflight requests when sending preflight requests?

For example, you can set a validity period, and preflight will not be repeated during the validity period.

3.2.2 Implementation

You can add an access-control-max-age request header after the preflight is completed on the server to solve this problem.

3.2.3 cors response field description

access-control-allow-methods

This field is required, 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 method requested by the browser. This is to avoid multiple "preflight" requests.

access-control-allow-headers

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

It is also a comma-separated string indicating that the server supports All header information fields, not limited to the 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 preflight request in seconds. In the above result, the validity period is 20 days (1728000 seconds). That is, the response is allowed to be cached for 1,728,000 seconds (i.e. 20 days). During this period, there is no need to issue another preflight request.

access-control-allow-methods: get, post, put
access-control-allow-headers: x-custom-header
access-control-allow-credentials: true
access-control-max-age: 1728000
Copy after login

The above is the detailed content of How Nginx solves the problem of WebApi cross-domain secondary requests and Vue single page. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

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

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to use echarts in vue How to use echarts in vue May 09, 2024 pm 04:24 PM

Using ECharts in Vue makes it easy to add data visualization capabilities to your application. Specific steps include: installing ECharts and Vue ECharts packages, introducing ECharts, creating chart components, configuring options, using chart components, making charts responsive to Vue data, adding interactive features, and using advanced usage.

The role of export default in vue The role of export default in vue May 09, 2024 pm 06:48 PM

Question: What is the role of export default in Vue? Detailed description: export default defines the default export of the component. When importing, components are automatically imported. Simplify the import process, improve clarity and prevent conflicts. Commonly used for exporting individual components, using both named and default exports, and registering global components.

How to use map function in vue How to use map function in vue May 09, 2024 pm 06:54 PM

The Vue.js map function is a built-in higher-order function that creates a new array where each element is the transformed result of each element in the original array. The syntax is map(callbackFn), where callbackFn receives each element in the array as the first argument, optionally the index as the second argument, and returns a value. The map function does not change the original array.

The role of onmounted in vue The role of onmounted in vue May 09, 2024 pm 02:51 PM

onMounted is a component mounting life cycle hook in Vue. Its function is to perform initialization operations after the component is mounted to the DOM, such as obtaining references to DOM elements, setting data, sending HTTP requests, registering event listeners, etc. It is only called once when the component is mounted. If you need to perform operations after the component is updated or before it is destroyed, you can use other lifecycle hooks.

What are hooks in vue What are hooks in vue May 09, 2024 pm 06:33 PM

Vue hooks are callback functions that perform actions on specific events or lifecycle stages. They include life cycle hooks (such as beforeCreate, mounted, beforeDestroy), event handling hooks (such as click, input, keydown) and custom hooks. Hooks enhance component control, respond to component life cycles, handle user interactions and improve component reusability. To use hooks, just define the hook function, execute the logic and return an optional value.

What scenarios can event modifiers in vue be used for? What scenarios can event modifiers in vue be used for? May 09, 2024 pm 02:33 PM

Vue.js event modifiers are used to add specific behaviors, including: preventing default behavior (.prevent) stopping event bubbling (.stop) one-time event (.once) capturing event (.capture) passive event listening (.passive) Adaptive modifier (.self)Key modifier (.key)

Onmounted in vue corresponds to which life cycle of react Onmounted in vue corresponds to which life cycle of react May 09, 2024 pm 01:42 PM

onMounted in Vue corresponds to the useEffect lifecycle method in React, with an empty dependency array [], executed immediately after the component is mounted to the DOM.

Promise usage in vue Promise usage in vue May 09, 2024 pm 03:27 PM

Promise can be used to handle asynchronous operations in Vue.js. The steps include: creating a Promise object, performing an asynchronous operation and calling resolve or reject based on the result, and processing the Promise result (use .then() to handle success, .catch() to handle errors) . Advantages of Promises include readability, ease of debugging, and composability.

See all articles