vue解决axios二次封装跨域问题

跨域问题（Cross-Origin Resource Sharing, CORS）是由于浏览器的同源策略导致的，该策略限制了一个源（域名、协议、端口）的文档或脚本与另一个源的资源进行交互。同源策略是一种安全措施，旨在防止恶意站点窃取数据或执行恶意操作。

在vue项目开发中我们遇到应该怎么办呢？

问题重现：'Access-Control-Allow-Origin'

解决：

二次封装axios

import axios from "axios";
const request = axios.create({
  baseURL: "/api", // 配置代理完成后我们要在这里修改为 /api 否则还是会跨域
  // baseURL: "https://cn.apihz.cn", 这种就不行
  timeout: 5000,
  headers: {
    "Content-Type": "application/json",
  },
});
request.interceptors.request.use(
  (config) => {
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);
request.interceptors.response.use(
  (response) => {
    return response.data;
  }, // 请求成功
  (error) => {
    return Promise.reject(error);
  }
); // 请求失败
export default request;

在vue.config.js中配置跨域代理

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "https://cn.apihz.cn", // 目标服务器地址
        changeOrigin: true, // 是否改变源
        secure: false, // 是否验证ssl证书
        // pathRewrite: {
        //   "^/api": "", // 重写路径: 去掉路径中的/api
        // },
      },
    },
  },
};

请求接口封装

import request from "@/utils/request";
export const getWeather = () => {
  return request({
    method: "get",
    url: "/tianqi/tqyb.php?id=88888888&key=88888888&sheng=浙江&place=杭州",
  });
};

在vue页面中调用接口即可

<template>
  <div class="about">
    <h1>
      {{
        state.place +
        " " +
        state.weather1 +
        " " +
        state.windDirection +
        " " +
        state.temperature +
        "℃"
      }}
    </h1>
  </div>
</template>
<script setup>
import { getWeather } from "../api/tianqi";
import { onMounted } from "vue";
import { ref } from "vue";
const state = ref({});
onMounted(() => {
  const app = async () => {
    const res = await getWeather();
    state.value = res;
  };
  app();
});
</script>

效果展示

请求可以正常接收了