vue 解决跨域问题

跨域

1. 跨域错误源自于浏览器的同源策略
2. URL有三个基本组成部分：协议+域名或ip+端口，三个必须完全相同称之为同源，不同源的称之为跨域
3. 注意：同源策略不是服务器行为，而是浏览器的行为，服务器会正常响应请求，但是如果不同源会被浏览器拦截

解决方案

vite.config.js (修改后需要重启脚手架项目）

server: {
    open: true,
    host: '0.0.0.0',
    port: 8080,
    proxy: { // /配置http-proxy代理方式跨域
        // 代理出现跨域的接口
        "/api": { // // 自定义请求的开头,使用代理方式处理/api开头的请求,/xxx可以自定义
            target: "https://origin.source.com", // 往哪个服务器发请求`
            changeOrigin: true, // 是否改变源地址
            // 重写路径 (env环境判断)
            rewrite: (path) =>
            path.replace(
                /^\/api/,
                env.VITE_API_URL +
                  (env.VITE_NODE_ENV == "production"
                    ? "/origin_recovery"
                    : "/origin_recovery_prev")
            ),
        },
    }
},

axios.js

let instance = axios.create({
    baseURL: '/api',
    headers: {
        'Content-Type': 'application/json',
        'X-Access-Token': sessionStorage.getItem('otherToken') || ''
    },
    responseType: 'json',
    timeout: 80000
})

api.js

export const getData = data => {
  return request({
    url: `/recovery`,
    method: 'post',
    data,
  });
};

index.vue

mounted(){
    this.dataList();
},
methods: {
    dataList() {
    // 处理参数
    let params = {
        ...
    }
      getData(params).then(res => {
        if (res.code === 200) {
          this.data = res.data
        } else {
          console.log(res)
        }
      })
    },
}

成功解决跨域