如何为Laravel API设置Vue axios跨域原点？

Question

如何为Vue应用程序设置跨域配置？我有一个LaravelAPI服务于不同的域。因此，当我尝试发送和API请求时，它并没有将其发送到正确的API目标，而是发送到自己的域（例如，vue在devport.findosman.xyz上提供服务）

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>

我已经尝试过的是：

vue.config.js

module.exports = {
  devServer: {
    port: process.env.VUE_APP_DEV_PORT,  
    proxy: 'api.devport.findosman.xyz/api',
  },
};

环境。发展

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

但这仍然不起作用。我是否在客户端遗漏了一些重要的东西，或者在laravel端也需要一些改变？




Answer 1

在vue中。配置。js，编写外部url，在axios中，编写您试图访问外部url的源url。以下是一个例子：

module.exports = {
  devServer: {
    port: process.env.VUE_APP_DEV_PORT, // this should be: api.devport.findosman.xyz
    proxy: process.env.VUE_APP_API_ROOT_PATH,
  },
};

当您启动请求时，请使用源url

axios.get(originUrl); // could be http://localhost or wherever from you're attempting to access that site