Laravel

向军大叔每晚八点在 抖音 和 bilibli 直播

代理设置

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

场景一

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

这种情况只需要配置前端 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.houdunren.com',
  withCredentials: true,
  withXSRFToken: true
})

csrf

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

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

内网穿透

在进行微信开发时，我需要将本地网站让远在其他地方的用户观看时，可以使用内网穿透来处理。我介绍两种方式来处理。

Herd

使用 herd或 valet 进行开发时，我们可以使用 Expose 来完成。访问 herd 共享站点 章节来在你的项目根目录中依次执行命令就可以了。

使用特点

• 操作简单，每次执行命令 expose share 就可以分享站点
• 共享后的网站，打开速度会比较慢
• 免费用户生成的域名，每次会不同，这在开发微信公众号时，需要每次都在微信中设置新域名

花生壳

使用国产的 花生壳 软件也是不错的方式，国内打开速度会很快。

使用特点

• 打开网站速度快
• 免费用户每个月有流量限制，但一般开发是够用的

使用方法

1. 首先访问 花生壳 网站下载电脑桌软件

2. 在你的项目根目录执行命令

   php artisan serve

3. 在花生壳软件中进行站点配置

   

4. 然后使用 花生壳 生成的连接就可以访问了