如何正确配置对接Laravel API的Vue应用Axios跨域

1. Login.vue 代码结构写错了（这是请求错发域的直接原因） #

你把 import API from "@/api/Api" 写在了 <script> 标签外面，这不符合 Vue 单文件组件的编译规则，会导致你根本没导入到自定义的带 baseURL 的 axios 实例。axios 在拿不到有效 baseURL 时，会默认把请求路径拼到当前页面的域名下，正好对应你现在请求被发到 devport.findosman.xyz/login 的现象。
正确的组件结构：

<template>
  <!-- 页面模板 -->
</template>

<script>
// 所有导入必须写在 script 标签内部
import API from "@/api/Api";

export default {
  methods: {
    async login() {
      const res = await API.post('login')
    }
  }
}
</script>

2. devServer.proxy 配置错误，且线上环境完全不生效 #

先明确一个基本规则：vue.config.js 里的 devServer 配置只在本地 npm run serve 开发阶段生效，打包成静态文件部署到线上后，这部分配置不会被包含在构建产物里，根本不起作用。
其次你现在的 proxy 写法本身就不兼容 Webpack 的代理规则，正确的本地开发代理配置应该是对象格式：

// vue.config.js
module.exports = {
  devServer: {
    port: process.env.VUE_APP_DEV_PORT,
    proxy: {
      // 匹配所有以 /api 开头的本地请求
      '/api': {
        target: 'http://localhost:8000', // 本地运行的 Laravel 服务地址
        changeOrigin: true,
      }
    }
  }
};

3. 环境变量配置缺失，线上构建时拿不到 API 地址 #

你现在只有开发环境的 .env.development 配置，没有生产环境的对应配置，导致线上打包时 process.env.VUE_APP_API_ROOT_PATH 读取不到值，axios 的 baseURL 为空。
你需要在项目根目录新增 .env.production 文件，这部分变量只会在执行 npm run build 打包生产包时读取：

# .env.production
VUE_APP_API_ROOT_PATH = 'https://api.devport.findosman.xyz/api'

本地开发环境的变量可以调整为相对路径，配合 devServer 代理绕开跨域：

# .env.development
VUE_APP_API_ROOT_PATH = '/api'
VUE_APP_DEV_PORT = 3000

这样本地开发时，所有 /api 开头的请求会被 devServer 自动代理到本地 Laravel 服务，不需要在前端写跨域请求；线上部署后，会直接请求配置好的完整 API 地址。

前端直接跨域请求 https://api.devport.findosman.xyz 的接口时，必须在 Laravel 侧配置 CORS 规则，否则会被浏览器跨域拦截：

• 编辑 Laravel 的 config/cors.php 配置文件，设置允许的前端来源：

'paths' => ['api/*'],
'allowed_methods' => ['*'],
'allowed_origins' => ['https://devport.findosman.xyz'],
'allowed_headers' => ['*'],
'supports_credentials' => true,

• 配置完成后执行 php artisan config:clear 清除配置缓存，让规则生效。

改完后打开浏览器开发者工具的 Network 面板，确认：

• 本地开发时，请求路径是 http://localhost:3000/api/login，由 devServer 转发到本地 Laravel
• 线上部署后，请求直接发送到 https://api.devport.findosman.xyz/api/login

内容的提问来源于stack exchange，提问作者Osman Rafi