js开发环境如何解决跨域问题

问题

npm start之后，自己会启动一个端口，比如3000，调用后端服务（比如localhsot:3006/service/list）就会出现跨域，那怎么弄呢？

方式一: webpack设置proxy

proxy: {
            // 一旦devServer接受到 /api/xx 服务，会把服务转发到另一个服务器
            '/service': {
                target: 'http://localhost:3006',
                changeOrigin: true,
                // 发送请求时，请求路径重写，将/api/xx -> /xx 
                // patchRewrite: {
                //     '^/service': ''
                // }
            },
        }

方式二：后端mock服务并允许跨域

const Koa = require('koa');
const app = new Koa();
app.listen(3006);

// 允许跨域，mock本地接口
// var cors = require('koa2-cors');
// app.use(cors({
//     origin: function (ctx) {
//         return '*'  // 允许来自所有域名请求
//        // return 'http://localhost:8080'; / 这样就能只允许 http://localhost:8080 这个域名的请求了
//     },
//     exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],
//     maxAge: 5,
//     credentials: true,
//     allowMethods: ['GET', 'POST', 'DELETE', 'OPTIONS', 'PUT'],
//     allowHeaders: ['Content-Type', 'Authorization', 'Accept'],
// }));

//路由处理
const router = require('koa-router')(); 
app.use(router.routes());
const fs = require('fs');






//  -------------------      get请求区    -------------------------------
router.get('/', async (ctx, next) => {
    ctx.response.body = '666';
});

router.get('/service/list', async (ctx, next) => {
    let data = fs.readFileSync('jsons/list.json');
    ctx.response.body = data.toString();
});


//  -------------------      post请求区    -------------------------------
router.post('/signin', async (ctx, next) => {
    let data =  fs.readFileSync('jsons/signin.json');
    ctx.response.body = data.toString();
});

 

list.json文件随便写：

[
    {
      "name": "唐三",
      "age": 20
    },
    {
      "name": "马宏俊",
      "age": 20
    },
    {
      "name": "小舞",
      "age": 18
    }
  ]
  

 

启动服务后，随便修改list.json就可以快速mock后端接口了： localhost:3006/service/list

nodemon koa