跨域 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,所有接口都由本地代理了

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏linux运维学习

linux学习第十一篇:linux和Windows互传文件,用户配置文件和密码配置文件,用户组管理以及用户管理

linux和Windows互传文件 先使用命令yum install -y lrzsz安装 PS:前提是使用xshell或者securecrt。putty不支持...

25660
来自专栏IT笔记

Nginx学习之合并请求连接加速网站访问

作为这个世界上最好的web服务器之一,Nginx的优势不明而喻。下面来讲讲,Nginx是如何合并请求连接的。 小知识 当我们在浏览网页的时候,对浏览速度有一个重...

38260
来自专栏性能与架构

Nginx的模块化设计

Nginx由内核和模块组成 内核的设计非常微小和简洁,完成的工作也非常简单,仅仅通过查找配置文件将客户端请求映射到一个location block,而在这个lo...

413100
来自专栏知识分享

NodeMCU初探

对于ESP8266模块,早就想知道如何用其脚本语言, 自己先用的这个模块测试的 ? 首先是先下载需要用到的工具和固件 链接:http://pan.baidu.c...

38570
来自专栏pangguoming

CentOS 7安装SSHFS 实现远程主机目录 挂载为本地目录

官方下载地址 https://github.com/libfuse/sshfs/releases

30920
来自专栏猛牛哥的博客

快手(AAU)更新记录v2.9.2.01

18540
来自专栏三木的博客

发行版制作及Anaconda基础

Anaconda是用于Fedora, RHEL等Linux发行版的安装程序,可以实现通过LiveCD,PXE,NFS等方式安装Linux系统以及利用kickst...

273100
来自专栏哲学驱动设计

发布 Rafy 源码到 GitHub

最近项目组开始使用 Git 来作为源码管理。我今天就顺便把 Rafy 的源码也迁移到了 github 上,方便大家使用。这是项目的地址:https://gith...

23160
来自专栏MongoDB中文社区

使用mlaunch和m快速搭建MongoDB测试集群

不知道大家在使用MongoDB的时候有没有遇到突然想要一个集群但是手边又没有的时候?特别是我已经升级到4.0了,突然想要一个3.2的集群怎么办?然后去下载,改配...

12710
来自专栏云计算教程系列

在Ubuntu 16.04如何使用Percona将MySQL类别的数据库备份到指定的对象存储上呢?

数据库通常会在您的基础架构中存储一些最有价值的信息。因此,在发生事故或硬件故障时,必须具有可靠的备份以防止数据丢失。

16530

扫码关注云+社区

领取腾讯云代金券