问题收录1：跨域问题

问题1：跨域问题

错误原因详解：

浏览器的 “同源策略” 要求，网页（当前从 http://localhost:5173 发起请求）只能请求协议、域名、端口都完全一致的资源。当请求其他源（这里是 https://whyta.cn）的接口时，需要目标服务器通过 Access-Control-Allow-Origin 响应头，明确 “允许哪个源来访问自己”。

而错误提示中说：服务器返回的 Access-Control-Allow-Origin 值是 http://localhost:8081，但当前的请求源是 http://localhost:5173 —— 两者不匹配，所以浏览器阻止了这个请求，进而导致 Axios 报 Network Error（因为跨域被浏览器拦截，请求实际没成功到达业务逻辑层面）。

解决方案：

1. 后端修改 CORS 配置：让接口服务器（whyta.cn）的 Access-Control-Allow-Origin 响应头，添加当前的前端域名（比如 http://localhost:5173），或者直接设为 *（生产环境需谨慎，* 表示允许所有源，有安全风险）。
2. 前端用 “代理” 转发请求：如果是用 Vite、Create React App、Vue CLI 等构建工具，可以配置开发服务器代理，让前端请求先转发到代理服务器，再由代理去请求目标接口（这样浏览器会认为是 “同源请求”，绕开 CORS 限制）。

具体实现

请求的接口来自：apis.whyta.cn，里面的今日头条 由于是免费的接口，所以后端不能修改，用前端的解决方式

在 Vite 项目中配置代理解决跨域问题

1. 修改 vite.config.js

这里需要注意一个问题， rewrite重写路径，去掉/proxy前缀的时候，会将地址里面的相关部分也去掉，所以请求的时候最好找一个不是在接口里面出现的内容，比如下面的/proxy。

我使用的请求示例：https://whyta.cn/api/tx/topnews?key=你的APIKEY，如果是下面这个代码的使用

// 配置 proxy: 
{ '/api': { 
    target: 'https://whyta.cn', 
    rewrite: (path) => path.replace(/^\/api/, '') // 去掉 /api 前缀 
    } 
 }
// 请求代码
axios.get('/api/tx/topnews?key=xxx')

就会出现图片中的404的错误：

正确的使用如下

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    proxy:{
      '/proxy':{
        target:'https://whyta.cn',//目标接口域名
        changeOrigin:true,//设置为true,让目标服务器以为是我自己发的请求
        rewrite:(path)=>path.replace(/^\/proxy/,'')//重写路径，去掉/proxy前缀
      }
    }
  }
})

2. 修改前端请求代码（Axios 部分）

<template>
    <h1>{{ jsonTime }}</h1>
</template>
<script setup>
import { ref,onMounted } from 'vue'
import axios from 'axios'

const jsonTime = ref('')

const fetchTime = async () => {
    const response = await axios.get('/proxy/api/tx/topnews?key=d8c6d4c75ba0')
    console.log(response.data)
}
onMounted(()=>{
    fetchTime()
})
</script>
<style scoped></style>

请求成功啦