webpack开发环境跨域的实例教程

本篇文章主要介绍了vue-cli webpack 开发环境跨域详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

edit dev.proxyTable option in config/index.js. The dev server is using http-proxy-middleware for proxying

为了解决跨域问题，

1. 通常会使用Jsonp，但是jsonp只能是get请求。

2. 或者使用CORS支持，设置Access-Control-Allow-Origin: *

0 前置技能

熟悉vue-loader 和 webpack

 1 基本配置

编辑confix/index.js文件 dev server使用的是http-proxy-middleware来代理

// config/index.js
module.exports = {
 // ...
 dev: {
  proxyTable: {
   // proxy all requests starting with /api to jsonplaceholder
   '/api': {
    target: 'http://jsonplaceholder.typicode.com',
    changeOrigin: true,
    pathRewrite: {
     '^/api': ''
    }
   }
  }
 }
}

The above example will proxy the request /api/posts/1 to http://jsonplaceholder.typicode.com/posts/1.

 2 全局匹配

you can provide a filter option that can be a custom function to determine whether a request should be proxied:

提供一个过滤器，制定路由规则和路由方法。

proxyTable: {
 '*': {
  target: 'http://jsonplaceholder.typicode.com',
  filter: function (pathname, req) {
   return pathname.match('^/api') && req.method === 'GET'
  }
 }
}

【相关推荐】

Javacript免费视频教程

2. Bootstrap 表单验证formValidation 的实例详解

3. JS中offsetWidth的bug及处理方法

4. jQuery Validate 校验多个name的实例详解

5. easyUI下拉列表点击事件的实例详解

Atas ialah kandungan terperinci webpack开发环境跨域的实例教程. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!