跨域定义：
跨域的解释：当前所在页面的url去请求后台提供的url的时候，这两个url的相比较之下，如果协议类型、域名、端口号其中任何一个不一致就会发生跨域问题

序号	当前所在页面的url	后台提供的url	跨域情况	原因
1	`http://localhost:8080`	`http://localhost:8080/zbApi/user/auto_login`	不跨域	协议类型、域名、端口号都一致
2	`http://localhost:8080`	`https://localhost:8080`	跨域	协议类型不相同 http`\|` https
3	`http://localhost:8080`	`http://ymzp.0633hr.com/api/app/user/auto_login`	跨域	域名不同
4	`http://localhost:8080`	`http://localhost:8081`	跨域	端口号不相同 8080 `\|`8081

项目简介：我是使用脚手架创建的vue项目，且是前后端分离的项目。
前端用的vue.js框架，后端用的是thinkcmf或者node.js框架。
既然是前后端分离的项目，前端爱用什么框架就用什么框架，后端爱用什么框架就用什么框架，前后端并不干预，就看公司的要求了，都是可以随意搭配的。
就像我们公司，1个项目前端用vue.js，后端用的是node.js。另一个项目前端用vue.js，后端用的是thinkcmf

问题分析：
开发阶段项目在本地，因此属于开发模式。
默认情况下，暴露在浏览器中的请求如果为localhost的话(http://localhost:8080/zbApi/user/auto_login)，那么是不会跨域的，因为你是在本地去请求本地的数据，实际上是序号1的情况。
但如果你暴露在浏览器中的请求的url如果为远程服务器的地址(http://ymzp.0633hr.com/api/app/user/auto_login)的话，那么肯定是跨域的，因为你是在本地去请求远程服务器上的数据，实际上是序号3的情况。

结论：
我这种情况属于后者，所以报了如下的错误。
Access to XMLHttpRequest at 'http://ymzp.0633hr.com/api/app/user/auto_login' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

image.png

解决办法

既要最终实现请求的地址变为http://ymzp.0633hr.com/api/app/user/auto_login，也要实现暴露在浏览器中的请求地址为http://localhost:8080/zbApi/user/auto_login，其中的一种做法就是：拦截请求的url中的指定内容，并做拦截后的处理操作。下面就演示这种做法。
拿公司的 http://ymzp.0633hr.com/api/app/user/auto_login和http://ymzp.0633hr.com/api/app/order/get_circle_nearby接口为例。

步骤一：首先操作的是config文件夹下的index.js文件。可以看到proxyTable里面没有配置任何信息，接下来主要是配置proxyTable

'use strict'
const path = require('path')

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {

      }
    },

    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-


    devtool: 'cheap-module-eval-source-map',

    cacheBusting: true,

    cssSourceMap: true
  },

  build: {
    index: path.resolve(__dirname, '../dist/index.html'),

    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    productionSourceMap: true,
    devtool: '#source-map',


    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    bundleAnalyzerReport: process.env.npm_config_report
  }
}

步骤二：拦截请求中的url指定内容，拦截到了，就可以对跨域问题尽情蹂躏了

proxyTable: {
      '/zbApi': { // 拦截请求url中的/zbApi
      }
},

步骤三：将项目中所有接口的公共的部分抽取出来，作为config文件夹下的index.js文件中的target的值。即：公共部分为 http://ymzp.0633hr.com/api/app

proxyTable: {
      '/zbApi': { // 拦截请求url中的/zbApi
        target: 'http://ymzp.0633hr.com/api/app', // 真实的请求地址
      }
},

步骤四：补全如下信息

 proxyTable: {
      '/zbApi': { // 拦截请求url中的/zbApi
        target: 'http://ymzp.0633hr.com/api/app', // 真实的请求地址
        // secure: true,  // true:使接口 允许前缀为https
        changeOrigin: true, // true:开启代理，使接口 允许跨域
        pathRewrite: {
          '^/zbApi': ' ' 
        }
      }
},

步骤五.在main.js文件中，将/zbApi作为axios的基类url 。直接将/zbApi赋值给axios的baseURL属性即可。
后续使用axios请求任何接口，都会在url前面接/zbApi进行请求数据。

import axios from 'axios'
axios.defaults.baseURL = '/zbApi'

步骤五：接口演示。
虽然参数url中只写了/user/auto_login，但由于步骤五设置了基类url，所以就成了zbApi/user/auto_login。
再加上参数url设置成了相对路径，因此会前拼开发模式下的浏览器地址.
最终请求的url变成了http://localhost:8080/zbApi/user/auto_login

this.$zbhttp({
        method: "post",
      // 虽然只写了/user/auto_login，由于步骤五，所以实际上url是http://localhost:8080/zbApi/user/auto_login
        url: "/user/auto_login",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
          "Api-Version": "v319",
          Token:
            "4c5d143a69d88913944cc02886a80096e9020f59f6601056855b2a6a2298b2ef",
          "Device-Type": "ios"
        }
      }).then(res => {
        console.log(res);
      });

image.png

步骤六：成功拿取数据

image.png

步骤七：最终config文件夹下的index.js文件配置信息如下

'use strict'
const path = require('path')

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/zbApi': { // 拦截请求url中的/zbApi
        target: 'http://ymzp.0633hr.com/api/app', // 真实的请求地址
        // secure: true,  // true:使接口 允许前缀为https
        changeOrigin: true, // true:开启代理，使接口 允许跨域
        pathRewrite: {
          '^/zbApi': ' ' 
        }
      }
    },

    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-


    devtool: 'cheap-module-eval-source-map',

    cacheBusting: true,

    cssSourceMap: true
  },

  build: {
    index: path.resolve(__dirname, '../dist/index.html'),

    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    productionSourceMap: true,
    devtool: '#source-map',


    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    bundleAnalyzerReport: process.env.npm_config_report
  }
}

vue使用 axios请求数据报 500的解决办法(跨域问题)

vue使用 axios请求数据报 500的解决办法(跨域问题)

解决办法