Nuxt3：跨域

dingcho

于 2024-07-26 00:29:15 发布

阅读量152

点赞数 4

分类专栏：前端运维文章标签：前端 javascript 服务器

本文链接：https://blog.csdn.net/yao_guai/article/details/140702731

版权

运维同时被 2 个专栏收录

75 篇文章 0 订阅

订阅专栏

前端

50 篇文章 0 订阅

订阅专栏

修改nuxt.config.ts：

export default defineNuxtConfig({
  .....
  //跨域处理
  nitro: {
    devProxy: {
      "/api": {
        target: process.env.NUXT_KINGBAL_PROXY_PATH,    // 目标后端API地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
 .....
})

如上所述，直接在nuxt.config.ts中添加跨域处理部分即可~~~

正式环境的时候我们也需要服务器支持跨域，我们直接配置nginx即可：

 server {
        listen       80;
        server_name  www.178xyw.com;

        location / {
            proxy_pass http://localhost:6666/;
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        }
  
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

其中 www.178xyw.com 需要变更为你的绑定域名