vue-cli开发时使用代理跨域请求

如果前台在开发环境下可以和服务端连起来测试就好了。但是由于端口不同，所以得跨域请求了，但是前台开发完后，是不是全部URL都要改？
于是搜索了一下，发现了“proxyTable”。

修改config/文件夹下的index.js

dev: {
    proxyTable: {
      // proxy all requests starting with /api to jsonplaceholder
      '/api': {//虚拟目录
        target: 'http://127.0.0.1:3000',//地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''//由于上面的虚拟目录实际上是不存在的，不去掉的话访问的时候显示的url会变成'http://127.0.0.1:3000/api'，所以得去掉
        }
      }
    },

配置了上面的参数后，这里用的是axios,例如地址是http://127.0.0.1:3000/aaa，就是下面的使用方法

axios.post('/api/aaa', {})
          .then(function (response) {
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          });

为什么要有个‘/api’？因为步骤1那里写的是‘/api’,那怎么办?别忘了，因为用的是axios，所以可以配置一下baseURL ，我这里就全局配置baseURL

axios.defaults.baseURL = '/api'

这样就可以通过代理访问服务端了

如果不想通过代理而是直接访问服务端，那就在服务端配置允许所有域访问

配置服务端

服务端我用的是express框，不借助其它包可以这样配置

app.all('*', function (req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
    res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
    if (req.method == 'OPTIONS') {
        res.send(200);
        /*让options请求快速返回*/
    } else {
        next();
    }
});

然后用cors，可以这样配置

//独自设置
var cors = require('cors');
app.post('/aaa',cors(), ...);

//全局设置
var cors = require('cors')
var app = express()
app.use(cors())

更多用法请参考cors

vue-cli开发时使用代理跨域请求

猜你喜欢