如何为不同的域 API 设置 Vue CORS？

大佬教程收集整理的这篇文章主要介绍了如何为不同的域 API 设置 Vue CORS？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决如何为不同的域 API 设置 Vue CORS？？

我正在尝试部署一个 Vue 应用程序，该应用程序具有单独的后端并且将托管在不同的域中。例如：

@H_727_5@meow.cat.xyz（应用程序）
1. API.meow.cat.xyz (API)

现在在 npm run build 之后，我尝试通过运行 serve -s dist 在本地预览它，并且应用程序在 localhost:5000 处中断。然而，问题是它没有在当前端点发送 API 请求（本地为 localhost:8000，服务器为 API.meow.cat.xyz）。我尝试按以下方式配置 CORS

vue.config.Js

@H_503_11@module.exports = {
  devServer: {
    port: process.env.VUE_APP_DEV_PORT,proxy: process.env.VUE_APP_API_ROOT_PATH,},};

.env.development

VUE_APP_API_ROOT_PATH = 'http://localhost:8000/API'
VUE_APP_DEV_PORT = 3000

请注意，我使用的是 axiox。这是我的 axios 设置。

API.Js

import axios from "axios";

const injectAccesstoken = (config) => {
  const accesstoken = localstorage.getItem("access_token");
  if (accesstoken)
    config.headers.common["Authorization"] = `Bearer ${accesstoken}`;
  return config;
};

const config = {
  baseURL: process.env.VUE_APP_API_ROOT_PATH,};

const API = axios.create(config);

API.interceptors.request.use(injectAccesstoken);

export default API;

并按如下方式使用

登录.vue

import API from "@/API/API";

<script>
  const res= await API.post('login')
</script>

此解决方案尚未奏效。它在 http://localhost:5000 发送请求。重点是什么 ？请注意，我正在使用 axios。提前致谢。

解决方法

app.get('/api',(req,res) => {
    res.set('Access-Control-Allow-Origin','http://localhost:3000');
    res.send({
        api: "your request."
    });
})

大佬总结

以上是大佬教程为你收集整理的如何为不同的域 API 设置 Vue CORS？全部内容，希望文章能够帮你解决如何为不同的域 API 设置 Vue CORS？所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。