代理设置

使用 vue、react开发前后端分离项目时，会出现跨域请求的 cors 错误。

场景一

下面配置的应用场景是 react 开发阶段使用 localhost:5173 与后端的 laravel 项目通信。开发完成后 react 与 laravel 使用同一个域名。

后端处理

1. 首先创建 config/cors.php 跨域处理的配置文件

   php artisan config:publish cors

2. 然后修改 config/cors.php 配置文件

   <?php
   
   return [
       'paths' => ['api/*', 'sanctum/csrf-cookie',],
   
       'allowed_methods' => ['*'],
   
       'allowed_origins' => ['http://localhsot:5173/'],
   
       'allowed_origins_patterns' => [],
   
       'allowed_headers' => ['*'],
   
       'exposed_headers' => [],
   
       'max_age' => 0,
   
       'supports_credentials' => true,
   ];

前端处理

这种情况只需要配置前端 vite.config.ts 配置文件即可。

下面的配置表示以 /api 请求时使用代理，并删除/api 前缀，因为 laravel 中使用的是 web.php 路由，所以不需要/api前缀，其他几段配置的意思一样。

export default defineConfig({
  plugins: [react(), TanStackRouterVite(),],
  resolve: {
    alias: { '@': path.resolve(__dirname, 'src') },
  },
  server: {
    proxy: {
      '/api': {
        target: 'http://php.test',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
      '/images': {
        target: 'http://php.test',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/images/, '/images'),
      },
      '/captcha_img': {
        target: 'http://php.test',
        changeOrigin: true,
      },
    }
  }
})

场景二

如果生产环境，前端与后端不在同一个域名下，跨域设置如下

后端处理

session

修改 config/session.php 为域添加前导 .来实现此目的:

'domain' => '.domain.com',

cors

1. 首先创建 config/cors.php 跨域处理的配置文件

   php artisan config:publish cors

2. 然后修改 config/cors.php 文件，设置supports_credentials为 true，表示允许前端发送 cookie

前端处理

axios

如果前端请求携带 cookie 也需要把 axios 的withCredentials 配置项设置为 true

const axiosInstance = axios.create({
  baseURL: 'https://www.banmashou.com',
  withCredentials: true,
  withXSRFToken: true
})

csrf

csrf是对表单进行安全处理的，所以需要先获取 csrf 的token 的 cookie，很简单在登录时发送请求

axios.get('/sanctum/csrf-cookie').then(response => {
    // 登录...
});