怎么在vue3项目中解决跨域问题

Question

今天我调用聚合数据的根据城市查询天气接口出现了跨域问题如下：

于是我在这个vue3项目里面的vite.config.js文件中配置代理服务器如下：

并且也在组件中修改了url的请求路径如下：

而现在请求返回的结果是一段html代码，而不是我想要的城市天气数据：

出现这个问题的原因是什么？该怎么解决？

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

你遇到的问题是由于跨域请求的限制导致的。当你在前端（Vue 应用）尝试通过 Ajax 或 Fetch API 向后端服务器（这里是聚合数据的 API）发起请求时，由于浏览器的同源策略限制，如果请求的 URL 与你的前端应用不在同一域名下，浏览器会阻止这个请求，从而引发 CORS（跨源资源共享）问题。

针对这个问题，你可以尝试以下几种解决方案：

解决方案一：配置后端服务器允许跨域请求

由于你正在使用聚合数据的 API，无法直接配置后端服务器，所以这一方案可能不适用。但如果是你自己的后端服务，可以在服务器端设置响应头信息，允许跨域请求。例如，使用 Express.js 时可以这样做：

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*"); // 允许任何来源访问
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

解决方案二：使用代理服务器

在 Vue 项目中，你可以配置 Vite 或其他代理服务器来转发请求。从你提供的 vite.config.js 文件来看，你已经配置了代理。确保配置正确并且代理服务器能够正常工作。你的配置应该类似于这样：

export default defineConfig({
  // ... 其他配置 ...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://apis.juhe.cn', // 替换为你的 API 地址
        changeOrigin: true, // 改变请求头中的 Host 为目标 URL
        pathRewrite: { '^/api': '' } // 路径重写，按需配置
      }
    }
  }
});

确保在组件中请求的 URL 是以 /api 开头的，例如：/api/simpleweather/query?city=北京&key=c8aaad5ff222cf8115002c5b337c5b87。

解决方案三：使用 CORS 插件或中间件

如果你的浏览器支持安装插件或者扩展，你可以考虑安装一个 CORS 插件来绕过这个限制。此外，某些浏览器开发工具（如 Chrome DevTools）提供了模拟 CORS 请求的功能。但这些方法并不是长久之计，因为它们依赖于特定的浏览器环境。

解决方案四：检查 API 请求是否正确

确认你的 API 请求格式是否正确，包括 URL、请求方法（GET、POST 等）、请求头（如果有的话）等。确保你使用的 API 文档是正确的，并且你的请求参数与文档要求一致。另外，确认 API 是否需要身份验证（如 API key）。

总结

跨域问题是一个常见的前端开发问题。在 Vue 项目中，通常通过配置代理服务器或使用 CORS 插件来解决这个问题。确保你的配置正确无误，并且检查 API 请求的格式是否正确。如果问题仍然存在，可能需要联系 API 提供者获取更多帮助。