跨域 webpack + vue-cil 中 proxyTable 处理跨域

跨域

了解同源政策:所谓"同源"指的是"三个相同"。

  • 协议相同
  • 域名相同
  • 端口相同

解决跨域

  1. jsonp 缺点:只能get请求 ,需要修改B网站的代码
  2. cors 这个方案缺点 是 ie6 7 兼容不好(倒是不见得要兼容)。需要B网站在响应中加头
  3. postMessage 缺点也是 ie6 7 兼容不好(倒是不见得要兼容)。需要修改B网站的代码
  4. iframe window.name 传值得方式很巧妙,兼容性也很好。但是也是需要你能修改B网站代码
  5. 服务端主动请求B网站,兼容性好而且你客户端的代码还是原来的ajax,缺点是感觉不好。(服务器端是不存在跨域安全限制的)
  6. 类似5 用nginx把B网站的数据url反向代理。

node, express 解决跨域

  • 加上请求头:
1 app.all(‘*‘, (req, res, next)=>{
2     res.header("Access-Control-Allow-Origin", "*");
3     res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
4     res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
5     res.header("X-Powered-By",‘ 3.2.1‘)
6
7     if(req.method=="OPTIONS") res.send(200);/*让options请求快速返回*/
8     else next();
9 });

重点说一下vue-cli处理跨域

  • 前后端分离的项目,常常开发的时候,请求的接口地址存在跨域问题
  • webpack 前后端分离开发接口调试解决方案,proxyTable解决方案
  • 首先要在项目目录中找到根目录下config文件夹下的index.js文件。由于我们是在开发环境下使用,自然而然是要配置在dev里面:
 1 port: 8080,
 2 proxyTable: {
 3   ‘/api‘: {
 4     target: ‘http://www.ainyi.com‘,  // 目标接口域名
 5     changeOrigin: true,  // 是否跨域
 6     // secure: false,  // 如果是https接口,需要配置这个参数
 7     pathRewrite: {
 8       ‘^/api‘: ‘‘   // 重写接口,一般不更改
 9     }
10   },
11 },
  • ‘/api‘ 为匹配项,target 为被请求的地址
  • 以上代码表示:只要是http://www.ainyi.com/api的接口,都将被本地8080端口的请求代理:

    http://localhost:8080/api ===> http://www.ainyi.com/api

  • 也就是说,想请求接口http://www.ainyi.com/api,就是通过http://localhost:8080/api代理访问,就不会产生跨域。
  • 这样就不需要在axios配置axios.defaults.baseURL,所有接口都由本地代理了

原文地址:https://www.cnblogs.com/ainyi/p/9335952.html

时间: 2024-11-07 01:33:55

跨域 webpack + vue-cil 中 proxyTable 处理跨域的相关文章

Webpack系列:在Webpack+Vue中如何将对后端的http请求转到https的后端服务器中?

在上一篇文章(Webpack系列:在Webpack+Vue开发中如何调用tomcat的后端服务器的接口?)我们介绍了如何将对于webpack-dev-server的数据请求转发到后端服务器上,这在大部分情况下就够用了. 然后现在问题又来了,在生产环境下接口一般采用https协议,如果我们要把数据请求转发到生产服务器上怎么办? 首先会想是不是把上一篇博文中提到的proxyTable改成https就可以了,如下:     proxyTable: {                '/appserve

vue proxyTable 接口跨域请求调试(五)

在不同域之间访问是比较常见,在本地调试访问远程服务器....这就是有域问题. VUE解决通过proxyTable: 在 config/index.js 配置文件中 dev: { env: require('./dev.env'), port: 8080, autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: '/', //proxyTable: {}, proxyTable: proxyConfig.prox

06 vue中使用axios跨域

本节将展示如果通过axios+proxyTable完成跨域请求并显示数据. 1.前提约束 完成nodejs,vue-cli,webpack,webpack-dev-server的安装 https://www.jianshu.com/p/eb4d9e132f62 2.操作步骤 完成vue项目中加入easytable[这时是固定数据] https://www.jianshu.com/p/bf5abb37eb3f 下载axios依赖包 cd vue-easytable cnpm install axi

webpack + vue 向本地后端发送http请求跨域问题

一.问题描述 前端: webpack + vue + axios 后端: wamp + php 用webpack访问前端页面是需要一个端口的,后端服务器也是需要一个端口的,端口不同,在本地调试接口就出现问题. 二.解决方法(不使用jsonp) 1)安装   proxy-middleware  插件  npm install proxy-middleware --save-dev 2)将项目目录下 build 文件夹下 dev-sever.js 中的 proxyMiddleware 改名为 htt

解决跨域问题以及Django中POST传递参数错误

一.跨域 在进行前后端开发的时候需要涉及到跨域的问题,跨域既可以在前端解决也可以在后端解决.前段解决的思路就是转换路径,将发出的请求的url地址转换成可以映射成的地址.后端的解决思路是将获取的地址转换成可以映射的地址. 1. 模型 1.1 前端跨域解决的模型 由于路由router的不同,因此在跨域请求的时候通过更换请求源为origin再对后端进行请求 1.2 后端跨域解决的模型 后端通过可接收的url来进行相同path的处理,揭示了前后端分析的关键点以及跨域解决的本质,即对相同的path进行不同

使用HTML5中postMessage 实现ajax中的POST跨域问题

HTML5中提供了在网页文档之间相互接收与发送信息的功能.使用这个功能,只要获取到网页所在窗口对象的实例,不仅仅同源(域+端口号)的web网页之间可以互相通信,甚至可以实现跨域通信. 浏览器支持程度:IE8+,firefox4+,chrome8+  opera10+ 1. 首先,要想接收从其他的窗口发过来的消息,就必须对窗口对象的message事件进行监听,如下代码: window.addEventListener(“message”, function(){},false); 2. 其次,需要

Wabpack系列:在webpack+vue开发环境中使用echarts导致编译文件过大怎么办?

现象,在一个webpack+vue的开发环境中,npm install echarts --save了echarts,然后在vue文件中直接使用 import echarts from 'echarts' 然后编译的时候加上了Uglify选项,发现vendor文件的大小已经达到了800多k,导致首次加载速度比较慢,然后我们这个是webapp,就更慢了. 所以考虑把echarts提取出来,改用cdn版本的echarts,具体操作步骤如下: (0)找到可用的echartscdn资源 在bootcdn

HTML5中Access-Control-Allow-Origin解决跨域问题

跨域在开发中一些是一个比较常见的问题虽然有json或者xml来解决,现在html5开始流行了,我们可以通过Access-Control-Allow-Origin解决跨域问题,下面一起来看看. A.abc.com 发起一个到 abc.com/B 的ajax请求,也会有跨域的问题.之所以会有跨域问题,实则是因为www.abc.com其实同A.abc.com一样,也是一个二级域名,而非一级域名(一级域名是http://abc.com) 对于是否允许跨域,更详细的说明可以看下表: URL 说明 是否允许

浅析Ajax跨域原理及JQuery中的实现分析

AJAX 的出现使得网页可以通过在后台与服务器进行少量数据交换,实现网页的局部刷新.但是出于安全的考虑,ajax不允许跨域通信.如果尝试从不同的域请求数据,就会出现错误.如果能控制数据驻留的远程服务器并且每个请求都前往同一域,就可以避免这些安全错误.但是,如果仅停留在自己的服务器上,Web 应用程序还有什么用处呢?如果需要从多个第三方服务器收集数据时,又该怎么办?  一.关于ajax跨域的思考 1.Ajax为什么不能跨域?到底是卡在哪个环节了?(下面项目中具体说,这里先说下结论). Ajax其实