[JavaScript知识库]vue-element-template 解决跨域问题

vue-element-template 解决跨域问题

1. 在mai.js中，去掉引入mockXHR

   /**
    * If you don't want to use mock-server
    * you want to use MockJs for mock api
    * you can execute: mockXHR()
    *
    * Currently MockJs will be used in the production environment,
    * please remove it before going online ! ! !
    */
    if (process.env.NODE_ENV === 'production') {
     const { mockXHR } = require('../mock')
     mockXHR()
   }
   

2. 在.env.development中，把BASE_API设为空。发布环境同理修改.env.production

   # base api
   VUE_APP_BASE_API = ''
   
   

3. vue.config.js中，在devServer下添加proxy，并去掉引入mock-server.js

   devServer: {
       port: port,
       open: true,
       overlay: {
         warnings: false,
         errors: true
       },
         proxy: {
         '/api': {
           // 这里就改成自己的api路径
           target: 'http://localhost:8081',
           changeOrigin: true,
           pathRewrite: {
             '^/api': ''
           }
         }
       }
       // before: require('./mock/mock-server.js')
     }
   

4. 之后在每个request的地址前加上/api

5. 该方法仅对dev环境有效