NUXTJS + Laravel解决CORS问题-DEV365 开发者社区

从浏览器访问应用程序

对于后端的本地环境，使用牛群/代客laravel提供了两种访问您在浏览器应用程序的方法：

Running php artisan serve: http://127.0.0.1:80
使用vite npm run dev to：http://backend-app.test

两种方式都有用，好的，现在在前端侧NUXTJS提供了一种访问您项目的简便方法：

npm run dev：http://127.0.0.1:8000

设置两个项目

要测试两种技术都可以一起工作，只需在Laravel应用中添加后端路线，然后检查NUXTJ中的响应：

Route::get('hello-world', fn () => 'Hello World');

现在在NUXT JS中，我们可以提出请求并在任何组件中获取响应：

<script setup>
const { data, pending, error } = await useFetch('http://backend-app.test/hello-world');
</script>

<template>
<h1>{{ data }}</h1>
</template>

如果打开控制台，您将能够看到与CORS相关的问题。

解决CORS问题

转到根目录中的nuxt.config.ts文件，然后添加路由规则对象：

export default defineNuxtConfig({
  devtools: { enabled: true },
  ...
  routeRules: {
    '/api/**': { proxy: { to: "http://backend-app.test/**" } }
  }
})

现在只是通过重新运行：npm run dev重建前端，现在应该在没有问题的情况下显示请求响应。

请记住：

您无需为外部API服务执行此操作
您可以在后端路线上添加一个前缀：http://backend-app.test/api/**仅允许通配符用于API路线。
如果您使用的是JsonResource包装器作为laravel中的响应，通常在获取数据时可用：

希望它有用，并且一如既往地快乐代码！