Recently, WE are coordinating API with other companies, but they don’t open cross-domain, so we have to solve it by ourselves.

The production environment

  1. Axios key configuration

    import axios from 'axios';

axios.defaults.timeout = 10000;
axios.defaults.baseURL = 'api/';

// HTTP request interceptor
axios.interceptors.request.use(
  (config) = > {
    // ...
    return config;
  },
  (err) = > {
    return Promise.reject(err); });// HTTP Response interceptor
axios.interceptors.response.use(
  (response) = > {
    return response.data;
  },
  (err) = > {
    return Promise.reject(err); });export default axios;
Copy the code

  2. DevServer configuration

    1. newvue.config.js
    2. Add the following
    module.exports = {
  devServer: {
    https: true.proxy: {
      '/api': {
        target: 'http://xxx.com/ds-dc-rest/'.secure: false.changeOrigin: true.pathRewrite: { '^/api': '/'}}}}};Copy the code

The development environment

Once packaged and published online, all interfaces have cross-domain limitations, so the development environment needs to be set up separately. If the pagoda is used, you only need to perform the following configuration:

  1. Open website Settings
  2. Modify the configuration file and add the following information: 
    // all/starting with/API are forwarded to the target server location/API {proxy_pass http://xxx.com/ds-dc-rest/; 404 location / {try_files $uri $uri/ /index.html; }Copy the code