使用webpack的proxy来解决跨域

使用webpack的proxy来解决跨域问题

什么是跨域

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的。javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

解决思路

使用前端服务IP和端口来访问后端接口地址，然后通过webpack的代理，访问实际的接口地址。就是遵守浏览器的游戏规则。

注意点：

axios的base_url一定是自己本地的，可以不写，默认就是当前服务地址。

target是后端的接口地址，也就是说我们在vue.confjg.js里面的taget写的是实际的请求地址。

可以使用webpack_proxy来解决跨域（主要说的是这里）

• vue.config.js

const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    devServer: {
        proxy: {
            "/api": {
                target: process.env.VUE_APP_BASE_URL, // todo 请注意，这里是后端的地址，这里不是本地的！！！！
                ws: false, // websocket
                secure: false, // 是否支持https
                changeOrigin: true, // 是否跨域
            }
        }
    }
})

• .env.development

  env="development"
  VUE_APP_BASE_URL = "http://localhost:8000"
  

• Api.ts

  /*
  @description:
  @auther: alex
  @data: 12/23/22
  */
  import axios, {AxiosResponse} from "axios";
  
  // const instance = axios({
  //     method: "post",
  //     baseURL: "", // 因为要启用代理，所以所以这里可以不用写，默认为当前服务的IP和端口
  //     timeout: 10000,
  // })
  
  const instance = axios.create({
      method: "post",
      baseURL: "",
      timeout: 10000,
  })
  export const post = (url: string, params: any): Promise<AxiosResponse> => {
      return instance.post(url, params)
  }
  
  export const get = (url: string, params: any): Promise<AxiosResponse> => {
      return instance.get(url, params)
  }