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

最新推荐文章于 2024-12-04 14:16:31 发布

不凡而大米、

最新推荐文章于 2024-12-04 14:16:31 发布

阅读量270

点赞数

分类专栏： java基础文章标签： java nginx

本文链接：https://blog.csdn.net/junxunfs/article/details/114376191

版权

java基础专栏收录该内容

30 篇文章 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
访问 http://localhost:3000/user/find 显示

Holle word

在这里插入图片描述

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文件：

<meta charset="utf-8">
<p>我是index2</p>

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

我是index2

在这里插入图片描述
访问 http://localhost:8082/index 显示

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

在这里插入图片描述

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

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
在这里插入图片描述
（如果一闪而过，在任务管理器有nginx.exe就可以了，就算运行成功。）

在这里插入图片描述

修改访问地址

打开index.html文件

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

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

测试

打开http://localhost:8000/ ，访问的是 localhost:8082
在这里插入图片描述

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

在这里插入图片描述

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

参考：

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