什么，跨域，你还不知道怎么解决？？

程序媛_橙子
386 阅读4分钟

这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战

image.png

在我们前端开发的过程中, 相信大家都遇到过一个让人头疼的问题,那就是跨域问题. 首先,在我们开始之前,首先要知道跨域是如何产生的:

  1. 协议
  2. IP地址
  3. 端口号

 以上三者,有任何一个不同,则会出现跨域问题。具体的内容可以见博主的另外一篇博文： 跨域及其小周边

知道了产生跨域的原因，那么我们就要讲讲到底如何去解决跨域了，本文给大家介绍两种：

  • nginx解决跨域
  • nodejs解决跨域

一、nodeJs解决跨域

我们可以在nodejs中利用CORS来处理跨域问题

比如我们向后台去发送一个请求,如果此时发生了跨域问题,那么我们可以在后台使用node去写一个服务器代理,来处理跨域,具体如下:

  1. 首先 更改你前端页面的访问地址为你node写的代理服务器的地址,如下所示:
    axios.post('代理服务器的地址').then((r)=>{
 
        console.log(r)console.log(r)
 
 
 
    })

2.然后在服务器代理中监听请求,并且利用CORS解决跨域问题

//若遇到跨域访问获取数据时先访问这个服务器地址就行
const express = require("express");
const cors = require("cors");
const { get } = require("axios").default; //利用axois发送个网络请求
const app = express();
app.use(cors()); //就这一部就已经解决了跨域
 
 
//如果访问的是本地服务器，现在这步就相当于已经解决了跨域问题
//如果访问其他地址的服务器，那么此处就相当于一个服务器代理，解决跨域问题
 
app.use(express.json());
app.use(express.urlencoded());
 
//服务器的代理请求地址
app.post("/proxy", async(req, res) => {
    const result = await get(req.body.url); //这里相当于发了一个网络请求，这不存在跨域，就像你在浏览器中直接输入请求的地址一样
    res.json({
        code: 1,
        info: result.data,//axios请求的数据放在返回数据的data属性中
    });
});
 
 
app.listen(8080, () => {
    console.log("本地代理服务器运行在8080端口");
});

这个文件就是一个单独的专门用来做服务器代理解决跨域的，只要运行这个文件将这个服务器打开就行了

一、nginx解决跨域

看完nodejs解决跨域，再来看看nginx吧，其实本质上换汤不换药

1、下载nginx

下载地址:   nginx.org/en/download…

如图所示, 选择相应的版本,进行下载

image.png

下载完成后,选择任意位置进行解压,不需要安装

解压完成后,进入nginx的目录,输入命令 nginx -v 如果能够出现版本,则说明成功,如图:

image.png

2、nginx反向代理解决跨域问题

在这里,我们使用ajax来做请求,然后node+express来写后台

前端代码如下所示:

<!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://localhost:3000/user/find',
                success:function(r){
                    console.log(r)
                },
                error:function(e){
                    console.log(e)
                }
            })
        })
    </script>
</body>
</html>

后端代码,如下所示:

使用前,需要安装express   npm install express

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

然后开启node服务

这个时候,如果打开页面访问接口,会出现跨域报错,如下图所示:

注意,打开文件的时候一定要在服务中打开,不要使用绝对路径打开

image.png

接着就是配置nginx文件,解决这个跨域问题

反向代理的意思就是把前端的地址和后端的地址 使用nginx转换到相同的地址下,如把上面的node服务3000端口 和 网页打开的服务5500端口都转换到 nginx的8000端口下

具体配置如下:

打开nignx底下conf文件夹,在conf文件夹中有一个nginx.conf 文件,更改配置如下

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

注意, listen那里不要使用node服务的3000,之前我是想着直接监听node的服务端口,应该是可以的,可是这样会占用3000接口,导致node服务启动不了

上面代码的意思是,把访问localhost:8000 转换成访问 localhost:5500,而访问localhost:8000/user... 则转换成localhost:3000/user

配置完成之后需要在终端中,使用 nginx -s reload 更新我们的配置

启动nginx的命令是 start nginx

image.png

然后,把前端代码的请求地址修改一下,此时前端访问的就不再是node的服务了,而是要访问nginx, 然后通过nginx做响应的转发

 // 给button添加点击事件
        $('button').click(function(){
            $.ajax({
                url:'http://localhost:8000/user/find',
                success:function(r){
                    console.log(r)
                },
                error:function(e){
                    console.log(e)
                }
            })
        })

在浏览器中访问的也不再是localhost:5500了,而是localhost:8000,原因,已经在上方解释过了

这样就不会出现跨域问题了,这就是反向代理

image.png

希望本篇文章,能够对您有所帮助,欢迎批评指正!

avatar
文章
阅读
粉丝