Vue解决axios跨域--代理服务器解决

打不着的大喇叭

发布于 2024-03-11 16:21:11

2170

发布于 2024-03-11 16:21:11

文章被收录于专栏：喇叭的学堂

1、跨域

是因为浏览器的同源策略引起的，是浏览器加的安全限制 -- 所以我们需要去解决这个问题

同源策略

拥有相同的协议、域名、端口号的网址间才可以相互访问资源。

解决跨域问题方法

JSONP跨域仅支持GET请求，一定要服务器支持才可以实现。（非官方，使用少，利用script标签进行跨域）只支持GET请求 CORS（Cross-Origin Resource Sharing）技术，需要后端设置http首部字节。（官方）

第三种 -- 利用代理服务器解决 代理服务器有两种常用解决方法：1、Nginx 2、vue-cli 脚手架（我们讲这个） 8080端口需要去给5000/students发请求，使用代理服务器：下图就是一个代理服务器的图，vue-cli脚手架会打开会配置一个服务器在本机的 8080 端口，所以我们打开的页面就是8080端口的出现了跨域问题，是因为我们要去给 5000 端口发送请求，根据同源策略，浏览器会报错 所以我们需要一个代理服务器来处理，且代理服务器和网页的协议、域名、端口号是一样（即需要满足同源策略），网页与服务器间才会有同源策略，我们设置的代理服务器解决了同源策略，由于服务器与服务器之间没有跨域问题，所以跨域问题就解决了流程：8080端口下的网页发请求 -> 8080端口代理服务器接收代理到（解决跨域） -> 5050端口服务器响应请求

2、开启代理服务器（方式一）

    vue.config.js 配置
    缺点: 1、只能代理一个服务器
          2、如果 public 文件下有 students 文件，那么代理就出问题了，会直接请求该文件，不会去代理 5000/students  
    
    module.exports = {
        devServer: {
            // 代理服务器发送给 响应服务器
            proxy: 'http://localhost:5000'
        },
    }

我们使用axios库，下载该库打开vscode终端 ========== npm i axios

然后把引入这个axios到我们的vue文件里面使用 ======== import axios from "axios";

去代理服务器8080请求students内容

在 vue.config.js 里面开启代理服务

配置可以去官网 配置参考 | Vue CLI 参看，记得里面的代理是最终响应的 5000 端口的服务器

在终端重启一下8080端口 npm run serve （记得，因为改了vue.config.js内容）

方案缺陷

如果你 public 文件有 students 文件，则不会走代理，也就是该方案无法控制是否走代理

3、开启代理服务器（方式二）

配置可以去官网 配置参考 | Vue CLI 参看

    开启代理服务器（方式二）
    
    * 优点：1、可以代理多个服务
            2、可以控制是否走代理 【走代理需要加 '/api'】
    不加下面 pathRewrite ，代理服务器会直接去 5000/gbase/students 请求

    devServer: {
        proxy: {
            '/gbase': {
                target: 'http://localhost:5000',
                
                pathRewrite: { '^/gbase': '' }, // *匹配 /gbase 改为空，然后代理服务器会直接去 5000/students 请求
                // *下面不写，都是默认为true
                // ws: true, // 用于支持websocket
                // changeOrigin: true // 用于控制请求头中的host值
            },
            '/demo': {
                target: 'http://localhost:5001',
                pathRewrite: { '^/demo': '' },
                // ws: true, //用于支持websocket
                // changeOrigin: true //用于控制请求头中的host值
            }
        }
    }
}