nuxt的后端如何设置跨域?

nuxt做的前端,首页使用了SSR,其它页面使用了CSR,
前端服务器配置:
proxy_pass http://localhost:3000
后端服务器是laravel做的
在后端服务器打印请求ip, 有的请求ip 是 前端服务器的, 有的ip 是客户端的,
这种情况下如何设置跨域,只允许前端服务器 或 是自己网站发出的请求 才可以请求到后端服务器

引用gpt回答
对于Nuxt混合使用SSR和CSR的场景,解决跨域问题的方法可以是:

  1. 在Nuxt端配置代理
    可以在nuxt.config.js中配置axios的proxy选项,将API请求代理到后端服务器,避免直接跨域。
axios: {
  proxy: true  
},

proxy: {
  '/api': {
    target: 'http://localhost:3000', 
    changeOrigin: true
  }
}

  1. 在后端服务器配置CORS
    在Laravel后端安装cors中间件,允许来自Nuxt服务器的跨域请求,并拒绝其他不合法域的访问。
public function handle($request, Closure $next)
{
  header("Access-Control-Allow-Origin: http://nuxtserver");

  // Allow only GET, POST, PUT, DELETE 
  if ($request->getMethod() === "OPTIONS") {
    return response()->json('OK', 200);
  }

  return $next($request); 
}

  1. JWT鉴权
    配合JWT令牌机制,前后端通过token来验证请求合法性。
    这样就只有持有授权token的请求从Nuxt服务器发出时,才能访问后端API。
    综上,核心还是在后端进行CORS配置,允许Nuxt服务器访问,拒绝其他非法域。同时配合代理或JWT避免跨域问题。