vue跨域的方法一种是直接在config文件夹下的index.js中的dev对象中配置proxyTable属性,
另一种是新建一个proxyConfig.js文件,然后注入index.js中,本质其实是一样的。
只是后一种将配置单独写成了一个文件而已。这里我选择了第二种写法。
首先在config文件夹下新建一个proxyConfig.js文件,代码如下:
module.exports = {
proxy: {
'/jwt': { //将http://192.168.**.***:9000印射为/jwt
target: 'http://192.168.**.***:9000', // 接口域名
secure: false, // 如果是https接口,需要配置这个参数
changeOrigin: true, //是否跨域
// pathRewrite: {
// '^/jwt': '' //需要rewrite的,
// }
}
}
}
这个就代表所有以jwt开头的请求,将发往http://192.168.**.***:9000,
如果pathRewrite那个部分不注释掉的话,就代表所有以jwt开头的请求,
将发往http://192.168.**.***:9000,并且在请求的时候删掉请求地址中的/jwt。
然后是index.js中的写法:
'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path');
const proxyConfig = require("./proxyConfig");
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: proxyConfig.proxy,
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 9090, // 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-
就是很简单的引入并配置就好了。接下来就可以测试跨域是否成功了。