js ajax 设置代理ip（vue Ajax 设置代理ip）-肥猫博客

一、什么是代理

代理就是通过一个特殊的网络服务去访问另一网络服务的一种间接访问方式。像我们不能直接访问国外的网站，只能使用VPN，就是使用了代理。

二、为什么要使用代理

1. 前端开发

前端应用要能访问，那必须是放在服务器上（服务器可以是nginx、nodejs、apache、tomcat等），像我们本地vue开发就是用nodejs启动了一个服务。

在开发中，我们如果使用相对路径进行网络请求，最后请求的路径是http://localhost:3000+url，而实际我们需要的是http://113.140.12.194:18083+，这就需要我们使用代理的方式，把把服务代理到http://113.140.12.194:18083;

2. 跨域

由于浏览器的同源策略（协议、ip、端口号都相同为同源），禁止网站向非同源的服务器发送ajax异步请求，也就是跨域。
而代理就是解决跨域的一种方式；

三、代理的配置（Vue）

在vue.config.js中配置代理

module.exports = {
  publicPath: './',
  devServer: {
    port: 3000,
    proxy: {
      "/request": {
        target: "http://113.140.12.194:18083",
        changeOrigin: true,
        ws: true,
        secure: true,
        pathRewrite: {
          "^/request": ""
        }
      }
    }
  }
}

*devServer：webPack-dev-server的配置
*open：是否自动启动浏览器
*host：运行到浏览器上后的Ip
*port：运行到浏览器上后的端口号；
*proxy：代理配置项（代理可配置多项）
*"/chd/api"：是代理配置项的key，表示拦截以/chd/api开头的url接口；
*target：目标接口的域名
*changeOrigin：是否跨域
*ws：代理webSocket时，需要设为true
*secure：使用https的时候，需要设为true
*pathRewrite：替换标识，原请求地址为/request/getdata时，将/request替换为空；（可选设置）

// 当使用上述代理设置时
this.$http({
  url: `/request/chd/api/authentication/org-tree/1234`,
  method: 'get'
}).then(({ data }) => {
});
pathRewrite会把/request替换为空；
然后代理到target里面的地址；
最后请求地址：
http://113.140.12.194:18083/chd/api/authentication/org-tree/1234

devServer里的代理配置，只在开发环境有用，在使用npm run build打包，并部署到服务器后，接口的请求地址，就会以服务器的地址为接口域名；

未经允许不得转载：肥猫博客 » js ajax 设置代理ip（vue Ajax 设置代理ip）