【vue】--代理方式跨域

傷城~ 2023-06-02 13:58 48阅读 0赞

### 正向代理与反向代理 ###

前端使用代理主要用于跨域请求，

关于跨域：常用的方式

*  JSONP：利用script标签可跨域的特点，在跨域脚本中可以直接回调当前脚本的函数。
 *  CORS：服务器设置HTTP响应头中Access-Control-Allow-Origin值，解除跨域限制

但是这两个跨域方案都存在一个致命的缺陷，严重依赖后端的协助，

代理 就可以作为 前端独立解决跨域的方案

**正向代理**

是指一个位于客户端和目标服务器(target server)之间的服务器，为了从目标服务器取得内容，客户端向代理发送一个请求并指定目标(目标服务器)，然后代理向目标服务器转交请求并将获得的内容返回给客户端。

vue-cli 3.x  新建vue.config.js文件

module.exports = {
        devServer: {
            proxy: {
                // proxy all requests starting with /api to jsonplaceholder
                '/api': {
                    target: 'http://localhost:8080',   //代理接口
                    changeOrigin: true,
                    pathRewrite: {
                        '^/api': '/mock'    //代理的路径
                    }
                }
            }
        }
    }

**反向代理**

反向代理（Reverse Proxy）是指以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。

[https://www.cnblogs.com/softidea/p/7425894.html][https_www.cnblogs.com_softidea_p_7425894.html]

转载于:https://www.cnblogs.com/zjt-blogs/p/11607046.html

[https_www.cnblogs.com_softidea_p_7425894.html]: https://www.cnblogs.com/softidea/p/7425894.html

发表评论取消回复

表情：

评论列表（有 0 条评论，48人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue代理服务器跨域

module.exports = { // 指定build路径 outputDir: 'D:\\dev\\idea-w

冷不防/ 2023年10月14日 17:30/ 0 赞/ 54 阅读

相关 vue 跨域解决方案，配置代理

早到devServer 增加红色图片中红色的模块 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cH

た入场券/ 2023年07月24日 02:27/ 0 赞/ 103 阅读

相关【vue】--代理方式跨域

正向代理与反向代理前端使用代理主要用于跨域请求，关于跨域：常用的方式 JSONP：利用script标签可跨域的特点，在跨域脚本中可以直接回调当前脚本的函数。

傷城~/ 2023年06月02日 13:58/ 0 赞/ 49 阅读

相关 vue+uniapp：跨域问题（解决法式vue代理）

一、manifest.json文件中，在h5中配置（注意/api的使用） ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_tex

快来打我*/ 2023年01月07日 04:53/ 0 赞/ 357 阅读

相关 webpack 设置跨域代理 vue设置代理

Webpack Dev Server 代理 API 我们的开发项目一般运行localhost：8080 但后端的接口部署在同源地址下，生产环境没问题，但是本地就不行了

刺骨的言语ヽ痛彻心扉/ 2022年12月26日 13:28/ 0 赞/ 410 阅读

相关【VUE axios】axios跨域方式

1、配置config下的index.js proxyTable: { '/apis': { target: '

爱被打了一巴掌/ 2022年05月19日 06:55/ 0 赞/ 440 阅读

相关 vue 请求代理==>>跨域问题

以下配置仅适用于vue cli3。在前后端分离的项目中，一般在开发过程中，前端应用是在本地`localhost`运行的，但此时 API 接口在其他主机上，这是进行 API

「爱情、让人受尽委屈。」/ 2022年03月10日 05:54/ 0 赞/ 416 阅读

相关跨域，以及跨域的解决方式（nginx代理、javaWeb）

跨域，以及跨域的解决方式（nginx代理、javaWeb）文章目录跨域，以及跨域的解决方式（nginx代理、javaWeb） 1、什么

ゞ浴缸里的玫瑰/ 2021年09月24日 18:58/ 0 赞/ 576 阅读

相关 vue跨域解决方式

vue跨域解决方式进行跨页面访问数据，出现如下问题 ![在这里插入图片描述][20200614145409495.png] 由于跨域的问题解决方案1:

拼搏现实的明天。/ 2021年09月13日 16:38/ 0 赞/ 533 阅读

相关跨域请求代理

解决问题：在本地了开发中，使用线上的数据。 url的前三个部分的改变，都会产生跨域的问题，所以webpack-dev-server提供了一些配置，可以解决跨域请求的问题在

末蓝、/ 2021年09月02日 09:03/ 0 赞/ 652 阅读