This shit is really troublesome, I have to write an article to avoid the pit.
First, let’s take a look at the big guy’s explanation to understand reverse proxy and cross-domain issues:
2. OK, start working directly and install Nginx
Download URL: http://nginx.org/en/download.html
As shown in the figure, select the corresponding version to download
After the download is complete, choose any location to decompress, no installation required
After the decompression is completed, enter the nginx directory and enter the command nginx -v. If the version can be displayed, it means success, as shown in the figure:
There is a tiankeng here. It is recommended to install nginx on the C drive. Don’t ask me why, I don’t know. Anyway, if it is installed on the D drive, some configuration files will not take effect, which is really disgusting.
3. Explain the nginx configuration rules with an example
Front-end code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<button>点击</button>
<script>
// 给button添加点击事件
$('button').click(function(){
$.ajax({
url:'http://47.104.200.129:9000/apiin/rDevice/getOutPackInfo',
success:function(r){
console.log(r)
},
error:function(e){
console.log(e)
}
})
})
</script>
</body>
</html>Backend code:
let express = require('express')
// 创建应用
let app = express()
// get请求
app.get('/user/find',(req,res)=>{
res.send('hello')
})
// 启动服务,监听端口
app.listen(9000,()=>{
console.log('启动成功...')
})Then start the node service
At this time, if you open the page access interface, a cross-domain error will appear, as shown in the figure below: (This is just an example, don’t take it seriously, you only come to the blog when you encounter problems)
Note that when opening the file, it must be opened in the service, do not use the absolute path to open
Then configure the nginx file to solve this cross-domain problem
The meaning of reverse proxy is to convert the front-end address and back-end address to the same address using nginx, such as converting the above node service port 8080 and the service port 9000 opened by the web page to nginx port 9000
The specific configuration is as follows:
Open the conf folder under nignx, there is a nginx.conf file in the conf folder, change the configuration as follows
server {
listen 9000;
server_name localhost;
# / 我的理解是这一块主要是用来开启vue主页然后映射到nginx上的
location / {
proxy_pass http://localhost:8080;
}
# /apiin 表示访问以/apiin 开头 的地址 如/apiin/name,/apiin/find等
location /apiin {
proxy_pass http://47.104.200.129:9000;
}
}The meaning of the above code is to convert access to localhost:8080 into access to localhost:9000, and access to localhost:9000/apiin... is converted to http://47.104.200.129:9000/apiin
After the configuration is complete, we need to update our configuration using nginx -s reload in the terminal
The command to start nginx is start nginx
The command to kill all nginx processes is taskkill /f /im nginx.exe
OK, now comes the tiankeng problem. I just stuck here for a long time:
首先，运行nginx以及更改配置你都需要用管理员权限打开nginx安装的位置在进行操作。
然后，建议每次你更改配置之前都先用 taskkill /f /im nginx.exe 命令把所有运行的nginx pid都删了，然后再执行start nginx nginx -s reload start nginx
这时候又有一个坑，就是你直接运行nginx -s reload有可能遇到以下问题：
修改Nginx配置文档之后使用nginx -s reload命令出现
nginx: [error] OpenEvent(“Global\ngx_reload_35212”) failed (2: The system cannot find the file specified)的错误
解决办法：先运行 start nginx 再运行 nginx -s reload 然后再运行 start nginx
然后,把前端代码的请求地址修改一下,此时前端访问的就不再是node的服务了,而是要访问nginx, 然后通过nginx做响应的转发
// 给button添加点击事件
$('button').click(function(){
$.ajax({
url:'http://localhost:9000/apiin/find',
success:function(r){
console.log(r)
},
error:function(e){
console.log(e)
}
})
})这样就不会出现跨域问题了,这就是反向代理解决跨域问题
