使用nginx解决跨域问题---小实操

╰+哭是因爲堅強的太久メ 2022-11-05 08:39 144阅读 0赞

## 环境准备 ##

**前端**  
node+express访问html文件  
1.首先在需要操作的文件夹下安装express模块

> D:\\vs code\\File\\hrml\\mysqlweblod> npm install express

2.先写**第一个web服务**

创建app.js文件，如下

let express = require('express')
    // 创建应用
    let app = express()
     
    // get请求
    app.get('/user/find',(req,res)=>{
        res.send('hello')
    })
     
    // 启动服务,监听端口
    app.listen(3000,()=>{
        console.log('启动成功...')
    })

此时，可以开启node服务，  
在当前文件目录终端下输入：node. app.js  
![在当前文件目录终端下输入：node.app.js][node.app.js]  
访问 http://localhost:3000/user/find 显示

Holle word

![在这里插入图片描述][20210304195224545.png]

3.创建index.js文件，如下

//引入exprexx模块
    var express =require("express");
    var app =express();
    app.use(express.static('public'))
    
    //参数‘/’可当作设置url的根显示页面，这里即”http://localhost:8082/“访问的页面设置为index2.html
    app.get('/',(req,res)=>{
        res.sendFile(__dirname+"/"+"index2.html")        //设置/ 下访问文件位置
    });
    
    //参数‘/index’可当作设置url的/index下显示页面，这里即”http://localhost:8082/index“访问的页面设置为index2.html
    app.get("/index",(req,res)=>{
        res.sendFile(__dirname+"/"+"index.html")        //设置/index下访问文件位置
    })
    
    //设置端口8082访问地址，即http://localhost:8082
    var server =app.listen(8082,()=>{
        var port =server.address().port
        console.log("【】访问地址http://localhost:%s",port)
    })

准备index.html：

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
    </head>
    <body>
    <h2>Hello World!</h2>
    <p>即将访问：localhost:3000/user/find</p>
    <script type="text/javascript">
        function fun1(){
         
            var request = new XMLHttpRequest();
            request.open("GET","http://localhost:3000/user/find")
            request.send();
            request.onreadystatechange = function(){
         
                if(request.status==200 && request.readyState == 4){
         
                    console.log("响应的结果" + request.responseText)
                }
            }
        }
    </script>
    </body>
        <input type="button" value="跨域调用" onclick="fun1()">
    </html>

index2.html文件：

此时，可以开启node服务，  
在当前文件目录终端下输入：node. index.js  
![在这里插入图片描述][20210304195455819.png]  
访问 http://localhost:8082/ 显示

我是index2

![在这里插入图片描述][20210304195554248.png]  
访问 http://localhost:8082/index 显示

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1bnh1bmZz_size_16_color_FFFFFF_t_70]  
此时点击按钮，会发生跨域问题：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1bnh1bmZz_size_16_color_FFFFFF_t_70 1]

此时跨域问题准备好了，我们准备解决方法。

## Nginx配置 ##

打开nginx.conf文件  
修改配置：

server {
            listen       8000;
            server_name  localhost;
           # / 表示匹配路径为/的url
            location / {
               proxy_pass http://localhost:8082;
            }
     
            # /user 表示访问以/user 开头 的地址 如/username,/user/find等
            location /user {
               proxy_pass http://localhost:3000;
            }
     
        }

上面代码的意思是,

> 把访问localhost:8000 转换成访问 localhost:8082  
> ，  
> 而访问localhost:8000/user…则转换成localhost:3000/user

保存后，双击nginx.exe  
![在这里插入图片描述][20210304200625873.png]  
（如果一闪而过，在任务管理器有nginx.exe就可以了，就算运行成功。）

![在这里插入图片描述][20210304200714963.png]

## 修改访问地址 ##

打开index.html文件

将
    request.open("GET","http://localhost:3000/user/find")
    改为
    request.open("GET","http://localhost:8000/user/find")

此时已配置完成，已经解决了跨域问题了。

## 测试 ##

打开http://localhost:8000/ ，访问的是 localhost:8082  
![在这里插入图片描述][20210304201052385.png]

打开http://localhost:8000/index ，访问的是localhost:8082/index  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1bnh1bmZz_size_16_color_FFFFFF_t_70 2]  
此时点击按钮，访问的是http://localhost:8000/user/find，其实访问的是http://localhost:3000/user/find

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1bnh1bmZz_size_16_color_FFFFFF_t_70 3]

此时可以成功访问了！！！

参考：

[node+express的html页面访问][node_express_html]  
[一篇文章让你搞懂如何通过Nginx来解决跨域问题][Nginx]  
[nginx解决跨域问题][nginx]

[node.app.js]: /images/20221023/17bb6853b9c849a1afedb8ebebb570b0.png
[20210304195224545.png]: /images/20221023/78c199ecae7a41e28c8691d91247ea6c.png
[20210304195455819.png]: /images/20221023/5173b2ee7f074e0288c393f136f795b7.png
[20210304195554248.png]: /images/20221023/ee64fa4f58d14e9abc2984ef0e94d0e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1bnh1bmZz_size_16_color_FFFFFF_t_70]: /images/20221023/a56f1fd53bd349cda8b48ee9df2d2c5e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1bnh1bmZz_size_16_color_FFFFFF_t_70 1]: /images/20221023/b2b3a126420747cbbaa0e87cac81e61d.png
[20210304200625873.png]: /images/20221023/07917672cadf447a94dee052af1090bb.png
[20210304200714963.png]: /images/20221023/101725f092fd4da08d02224ccddf1221.png
[20210304201052385.png]: /images/20221023/cb1ef69c19d34b31962faceb4fca3a0c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1bnh1bmZz_size_16_color_FFFFFF_t_70 2]: /images/20221023/59b132b2e3ad42e5af5b4404c7ead39f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1bnh1bmZz_size_16_color_FFFFFF_t_70 3]: /images/20221023/4595d05620bc448db9243109116fe718.png
[node_express_html]: https://www.cnblogs.com/hmcjsc/p/12704350.html
[Nginx]: https://cloud.tencent.com/developer/article/1648860
[nginx]: https://blog.csdn.net/rolinabc/article/details/111881458