[SSR渲染学习]nuxt的跨域处理

nuxt跨域请求其他api

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  css: [
    //共享css处理,不是重点可以看看,@:是当前文件根目录
    '@/assets/css/global.css'
  ],
  //跨域处理
  nitro: {
    devProxy: {
      '/go1-api':{
        target: 'http://localhost:8088', //跨域处理的ip地址
        prependPath:true,
        changeOrigin:true //origin: 跨域处理关键
      }
    }
  }
})

fetch处理

import {ref,reactive,onMounted} from "vue"
const goData1 =ref()
//fetch处理
fetch('/go1-api').then(async res=>{
    return res.json()
}).then(async data => goData1.value = await data[0].message)
.catch(err=>console.log(err.message))

nuxt设置标头

useHead({
  title: ""
})

nuxt使用usFetch()请求自己的server中的api

//server/api/index.ts
export default defineEventHandler((event)=>{
    return {
        status: 200,
        message: "this is nuxt3 api"
    }
})

<script setup>
import {ref,reactive,onMounted} from "vue"

const myServerMsg1 = ref()
const {data} = await useFetch('/api') //data.value中才是数据
myServerMsg1.value = await data.value.message

script>
<template>
  <div>{{ myServerMsg1 }}div>
template>

<style scoped>
style>