关闭

vue-cli里配置webpack跨域请求ProxyTable的问题

来源:网络 文章列表 2019-07-25 8
由于浏览器的安全策略设定,IP地址、端口号、协议如果不一样的话,前端的请求就会被浏览器拦截掉啦。我们首先要在项目目录中找到根目录下config文件夹下的index.js文件。由于我们是在开发环境下使用,自然而然是要配置在dev里面:

由于浏览器的安全策略设定,IP地址、端口号、协议如果不一样的话,前端的请求就会被浏览器拦截掉啦。然鹅在平时项目的开发环境中,经常会遇到跨域的问题,尤其是使用vue-cli这种脚手架工具开发时,由于项目本身启动本地服务是需要占用一个端口的,所以必然会产生跨域的问题。当然跨域有多种解决方式,这里就不一一例举,下次弄篇文章单独讲,在使用webpack做构建工具的项目中使用proxyTable代理实现跨域是一种比较方便的选择。

跨域拦截如下:

如何使用proxyTable

我们首先要在项目目录中找到根目录下config文件夹下的index.js文件。由于我们是在开发环境下使用,自然而然是要配置在dev里面:

dev: {
  env: require('./dev.env'),
  port: 8081,
  autoOpenBrowser: true,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {
    '/api': {
      target: 'http://www.jsphp.net',  //目标接口域名
      // secure: false,  // 如果是https接口,需要配置这个参数
      changeOrigin: true,  //是否跨域
      pathRewrite: {
        '^/api': '/api'   //重写接口
      }
    },
  cssSourceMap: false
}

上面这段代码的效果就是将本地8080端口的一个请求代理到了http://www.jsphp.net这一域名下:

'http://localhost:8080/api' ===> 'http://www.jsphp.net/api'

这里的项目名api是我们人为加上去的,经过代理之后就没了,这样我们在配置代理这里还是只需要配置一份就够了,只是在写接口地址时要注意区分开发环境和线上环境就可以了。

当然你还可以更简单点

dev: {
  env: require('./dev.env'),
  port: 8081,
  autoOpenBrowser: true,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {
    '/': {
      target: 'http://www.jsphp.net',  //目标接口域名
      // secure: false,  // 如果是https接口,需要配置这个参数
      changeOrigin: true,  //是否跨域
      pathRewrite: {
        '^/': ''   //重写接口
      }
    },
  cssSourceMap: false
}

把api也去掉了。

 

如何理解代理:

这里很容易产生一个理解的偏差

比如上面,我们代理请求的是http://www.jsphp.net,但是我们在浏览器这边看到的仍然是

此时你可能误以为怎么请求的地址仍然是http://localhost:8081啊,好像不起作用啊,没有效果啊!

重点:

其实这里的地址是正确的,代理实现跨域的原理就是通过本地的接口地址,实际请求的是外网的地址,来欺骗浏览器,实现了跨域。

意思就是,你请求的 http://localhost:8081/xxx接口地址,代理中间件通过后台背地里给你请求http://www.jsphp.net,拿到请求数据后又给你。

代理实现的机制大体如下:

本地服务器 --》 代理 --》目标服务器 --》拿到数据后通过代理伪装成本地服务请求的返回值 ---》然后浏览器就顺利收到了我们想要的数据。

 

当然跨域的方法还有很多

比如你的后台程序是php的,你还可以通过php设置请求头来实现跨域

比如php后台设置为

<?php
header("Access-Control-Allow-Origin: *"); // 表示允许任何域名进行访问
?>

 

腾讯云限量秒杀

1核2G 5M 50元/年 2核4G 8M 74元/年 4核8G 5M 818元/年 CDN流量包 100GB 9元

版权声明

本站部分原创文章,部分文章整理自网络。如有转载的文章侵犯了您的版权,请联系站长删除处理。如果您有优质文章,欢迎发稿给我们!联系站长:
愿本站的内容能为您的学习、工作带来绵薄之力。

评论

  • 随机获取
点击刷新
精彩评论