1. The front-end route conflicts with the back-end route
First knowledge problem
Suppose there is a folder of / vue in the nginx project directory, and I also configure a vue project routing service of / vue.
At this moment, if I enter localhost:8080/vue, will the browser display the static web page under the vue folder or the configured vue items?
nginx is configured as follows
location / {
# There is a vue folder under the HTML directory and index.html under the vue folder
root D:\nginx\nginx-1.20.0\html;
index index.html index.htm;
autoindex on; #Enable nginx directory browsing function
autoindex_exact_size off; #The file size is displayed from KB
charset utf-8; #Display Chinese
}
# Write our router route / vue
location /vue{
// After alias, write the directory where the project is located
alias D:/nginx/nginx-1.20.0/html/dist;
charset utf-8; #Display Chinese
}
answer
Show vue items, ignore static pages under / vue
Because routing takes precedence over folders
Ask new questions
Well, suppose I change the name of the vue folder above to vuexx folder. Can you access the following index.html by visiting localhost:8080/vuexx
Question answer
No! The browser will display 404 no resources found. Now let's keep this question for further testing. We renamed the vuexx folder mvue, visited localhost:8080/mvue, and found that we could access the index.html static web page. Why exactly? Please see the following algorithm interpretation
nginx routing matching algorithm
For the confusing behavior of nginx: I guess the underlying design logic is as follows. First, the beginning regular matching is carried out according to the priority of the route accessed by the user and the route where the server (non-static resources) is located. If the beginning can match, it will be locked at the server for route search, and then ignore the static resource route (i.e. folder). If the user's access route does not match the beginning of all the routes where the server is located, nginx will directly determine to find the route in the static resources, thus ignoring finding the relevant routing services on the server
Generally, static resource routing is called front-end routing, and server-side resource routing is called back-end routing
This can well explain why / vue can access vue projects and / vuess cannot access static resource pages
Because the reason is very simple. If the / vuess accessed by the user matches the beginning of the server's route / vue, nginx will directly identify the route search in the server and ignore the search in the static resources. Of course, the server does not have this route. Therefore, even if the static resources have the / vuess folder, it is futile
2.nginx only recognizes/
First knowledge problem
Sometimes the folder paths we copy directly from the file resource manager (e.g. D://xx/yy) do not take effect on the nginx configuration. How to access them is 404 (no resources found)
Principle interpretation
In nginx, it does not support \, only supports/
# Write our routing code / vue
location /vue{
# After alias, write the directory where the project is located XXXXXX. Be careful not to write it as D:\nginx\nginx-1.20.0\html\dist, but as slash / form, otherwise it will 404
alias D:/nginx/nginx-1.20.0/html/dist;
charset utf-8; #Display Chinese
}
Writing as \ will make an error
3. The agency does not take effect
First knowledge problem
The agent is clearly set, and the lack of agent does not take effect
Problem solving
- The route should be written as / xxx / do not write as / xxx (if not, sometimes there will be problems, depending on the back end)
- There is no / (written) after the agency address http://xxx.cn It can't be written http://xxx.cn/ )
- / api is not added to the access address url [depends on your configured proxy route]
Configuration instance
location /api/{
proxy_pass http://121.36.94.221:6600/;
index index.html index.htm;
}
location /info/{
proxy_pass http://ckk.xiaoandcai.cn/;
index index.html index.htm;
}
Another case where the proxy fails is that the back end closes the interface (...)
4. Garbled code is reported in the error log
First knowledge problem
We can see the garbled code in the error log. How to start nginx is an error of garbled code
Problem solving
You may use Notepad to open the configuration file and modify the configuration. Remember that you can't use Notepad to edit this configuration file. If you want to edit it, please download notpad + + from Baidu.
If you already have a garbled code error, please save it as utf-8 code (you need to download noteadd + +, click menu code to convert)
Principle analysis
Notepad will change the file to UTF-8 code with BOM by default, but the coding format of our source file is ordinary UTF-8 code, so it certainly can't
5. Always show cross domain errors
First knowledge problem
We always find cross domain problems. We have clearly set up cross domain, but we still can't
Problem solving
Each route needs to add cross domain (must be set)
location / {
root html;
index index.html index.htm;
autoindex on; #Enable nginx directory browsing function
autoindex_exact_size off; #The file size is displayed from KB
charset utf-8; #Display Chinese
add_header 'Access-Control-Allow-Origin' '*'; #Allow access from all addresses
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #Support request mode
add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
}
location /vue{
alias D:/nginx/nginx-1.20.0/html/dist;
charset utf-8; #Display Chinese
add_header 'Access-Control-Allow-Origin' '*'; #Allow access from all addresses
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #Support request mode
add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
}
location /api/{
proxy_pass http://121.36.94.221:6600/;
index index.html index.htm;
add_header 'Access-Control-Allow-Origin' '*'; #Allow access from all addresses
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #Support request mode
add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
}
location /info/{
proxy_pass http://ckk.xiaoandcai.cn/;
index index.html index.htm;
add_header 'Access-Control-Allow-Origin' '*'; #Allow access from all addresses
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #Support request mode
add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
}
Principle analysis
nginx routes are parallel and need to be set separately. At present, bloggers have not found the writing method of global middleware