反向代理

最新推荐文章于 2024-07-18 12:49:52 发布

xuchao526272

最新推荐文章于 2024-07-18 12:49:52 发布

阅读量600

点赞数 2

文章标签：反向代理

本文链接：https://blog.csdn.net/xuchao526272/article/details/88821846

版权

反向代理

一 : 说明

解决跨域问题的方式 :
- JSONP == > 只能处理 get 方式
- CORS ==> 处理自己的服务器,如果要其他服务器，需要后台支持
- 反向代码 ==> 也很常用
说明
1. 演示跨域问题
2. 反向代理的原理（本地的代理服务器），浏览器-都是本地->本地代理-都是服务器->后端服务器
3. 脚手架vue-cli 生成的项目中如何使用反向代理

二 : 演示跨域问题

测试真实请求接口 : https://api.douban.com/v2/movie/in_theaters

在 todo-vuex 里的 app.vue 中的js 代码区域演示
安装 axios

代码 :

// 演示跨域问题
/* eslint-disable */
import axios from 'axios';

axios.get('https://api.douban.com/v2/movie/in_theaters').then(res => {
  console.log(res)
})

报错 :

Access to XMLHttpRequest at 'https://api.douban.com/v2/movie/in_theaters' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

报错原因

- 项目运行在  http://localhost:8080
  //  I  Your application is running here: http://localhost:8080  
- 发送ajax请求 : //域名是 https://api.douban.com/v2/movie/in_theaters
- 出现跨域问题

三 : 反向代理的原理

反向代理的原理（本地的代理服务器），浏览器-都是本地->本地代理-都是服务器->后端服务器

四 : 演示

修改 config/index.js 配置文件

  proxyTable: {
      '/myapi': {
        // 代理的目标服务器地址
        // https://api.douban.com/v2/movie/in_theaters
        // /myapi/movie/in_theaters
        target: 'https://api.douban.com/v2',
        pathRewrite: { '^/myapi': '' },
        //如果访问的协议头是https，则需要下面设置
        //如果是http,则不需要
        // 设置https
        secure: false,
        // 必须设置该项
        changeOrigin: true
      }
    },

最终代码

// axios.get('https://api.douban.com/v2/movie/in_theaters').then(res => {
axios.get("http://localhost:8080/api/movie/in_theaters").then(res => {
  console.log(res);
});

最终配置:

  proxyTable: {
      '/myapi': {
        // 代理的目标服务器地址
        // https://api.douban.com/v2/movie/in_theaters
        // /myapi/movie/in_theaters
        target: 'https://api.douban.com/v2',
        pathRewrite: { '^/myapi': '' },

        // 设置https
        secure: false,
        // 必须设置该项
        changeOrigin: true
      }
    },

重新启动 : npm run dev