The data cannot be fetched from the vuex+koa front end.

http://localhost:3000/getRencentJob  json
// require("koa-router"):
const router = require("koa-router")()
const fs=require("fs")
const cors=require("koa-cors")

router.get("/getRencentJob",async (ctx, next)=>{
    await cors();
    ctx.body=JSON.parse(fs.readFileSync("./static/recentJob.json"))
    
})


module.exports=router

my front end 8080 wants to fetch data across domains

const actions = {
    getJson(context){
    // getJson
    fetch("http://127.0.0.1:3000/getRencentJob", {
      method: "GET",
      mode:"cors",
      headers: {
        "Accept": "application/json",
        "Content-Type": "application/json",
      },
    }).then(function (res) {
        console.log(res)
      if(res.status === 200){
          
          
        return res.json()
      }
    }).then(function (json) {

     // console.log(typeof Array.from(json), Array.from(json));
      context.commit("setJson", json);
    })
  }
};

or error

recentJob.js?a162:18 OPTIONS http://localhost:3000/getRencentJob 404( Not Found)
getJson @ recentJob.js?a162:18
wrappedActionHandler @ vuex.esm.js?358c:704
dispatch @ vuex.esm.js?358c:426
boundDispatch @ vuex.esm.js?358c:332
getJson @ dashboard.vue?07b0:81
mounted @ dashboard.vue?07b0:87
callHook @ vue.esm.js?efeb:2921
insert @ vue.esm.js?efeb:4158
invokeInsertHook @ vue.esm.js? Efeb:5960
patch @ vue.esm.js?efeb:6179
Vue._update @ vue.esm.js?efeb:2660
updateComponent @ vue.esm.js?efeb:2788
get @ vue.esm.js?efeb:3142
Watcher @ vue.esm.js?efeb:3131
mountComponent @ vue.esm.js?efeb:2795
Vue.$mount @ vue.esm.js?efeb:8540
Vue.$mount @ vue.esm.js?efeb:10939
Vue._init @ vue.esm.js?efeb:4640
Vue @ vue.esm.js?efeb:4729
(anonymous) @ main. Js?1c90:16
. / src/main.js @ app.js:3856
webpack_require @ app.js:679
fn @ app.js:89
0 @ app.js:3897
webpack_require @ app.js:679
(anonymous) @ app.js:725
(anonymous) @ app.js:728
: 8080/-sharp/:1 Failed to load http://localhost:8080" is therefore not allowed access. If an opaque response serves your needs, set the request"s mode to "no-cors" to fetch the resource with CORS disabled.
vue.esm.js?efeb:8555 Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-.
:8080/-sharp/:1 Uncaught (in promise) TypeError: Failed to fetch

how to write, novice on the road


Cross-domain. When installing koa-cors, pay attention to whether the version is koa1 or koa2


another positive answer

you need to configure a koa-cors for KOA to allow cross-domain requests.

because when cross-domain, the browser will go to the backend to query whether headers lists the methods and domains that support cross-domain.
so the easiest way to provide this headers, on the backend is koa-cors

Setting proxy in

vue config can also be cross-domain, but it can only be used during development. It is not valid after packaging.


const cors=require ('koa2-cors')

app.use (cors ({

origin: function (ctx) {
   
        return "*"; // 
   
},
exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],
maxAge: 5,
credentials: true,
allowMethods: ['GET', 'POST', 'DELETE'],
allowHeaders: ['Content-Type', 'Authorization', 'Accept'],

})

Menu