04 使用 vue-antd-pro 2.0 调用服务跨域

使用 vue-antd-pro 2.0 调用服务跨域

默认端口 8000 启动提示跨域

Access to XMLHttpRequest at 'http://localhost:8000/sockjs-node/info?t=1560567439821' from origin 'http://localhost:8001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

解决办法

8000 端口被占用，默认启动 8001，需修改 vue.config.js 代理服务对应端口

devServer: {
    // development server port 8000
    port: 8001
  }

代理设置调用实际服务

示例中使用的在线 mock 服务，切换实际服务方法如下

设置服务代理

//  vue.config.js
devServer: {
    // development server port 8000
    port: 8001,
    proxy: {
      '/api': {
        target: 'http://172.xx.xx.xx:xxxx/', 
        ws: true,  // proxy websockets 
        changeOrigin: true,  // needed for virtual hosted sites
        pathRewrite: {
          '^/api': ''  // rewrite path
        }
      }
    }
  }

调用示例

//  src/api/login.js
export function login (parameter) {
  debugger
  return axios({
    method: 'post',
    url: 'rest/xxxxx/Author/IsLogins',
    data: {
      User_Account: 'user',
      User_Pwd: 'pwd'
    }
  })
}

• 实际访问服务地址 http://172.xx.xx.xx:xxxx/rest/xxxxx/Author/IsLogins
• 代理后访问服务地址 http://localhost:8001/api/rest/xxxxx/Author/IsLogins