用于 Nuxt.js 的 http-proxy 中間件解決方案

npm i @nuxtjs/proxy -D

在 nuxt.config.js 配置文件中添加對應的模塊，并設置代理

modules: ['@nuxtjs/axios','@nuxtjs/proxy'],axios: {proxy: true},proxy: {'/api': {target: 'http://example.com',pathRewrite: {'^/api' : '/'}}}

實戰

nuxt.config.js

modules: [// https://go.nuxtjs.dev/axios'@nuxtjs/axios',// https://go.nuxtjs.dev/pwa'@nuxtjs/pwa',// https://go.nuxtjs.dev/content'@nuxt/content',// 跨域'@nuxtjs/proxy'],// Axios module configuration: https://go.nuxtjs.dev/config-axiosaxios: {proxy: true,common: {'Accept': 'application/json, text/plain, */*'},},// 跨域proxy: {'/api': {target: 'http://127.0.0.1:3001',pathRewrite: {'^/api' : '/'}}},

mock.js

const Mock = require('mockjs')let Result = {code: 200,msg: "操作成功",data: null}// 獲取人物信息 Mock.mock('/api/user', 'get', () => {Result.data = { "userInfo": { "id": 9979, "userName": "Redmi K30", "productImg": "public/imgs/phone/Redmi-k30.png", "price": 1599, "num": 1, "maxNum": 5, "check": false } }Result.msg = "購物車錯誤"return Result })

業務

created() {this.getUserInfo();},methods: {getUserInfo() {console.log("已經進入了++++++++");this.$axios.get("/api/user").then((res) => {this.user = res.data.userInfo;console.log(JSON.stringify(res.data.data) + "=====res.data.data");}).catch((err) => {return Promise.reject(err);});},},

截圖

總結

以上是生活随笔為你收集整理的Nuxt如何发起跨域资源请求？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。