vue几个常用跨域处理方式介绍


Posted in Javascript onFebruary 07, 2018

设置express代理请求

在基于vue-cli的项目中,在开发环境配置(config/dev.env.js)中设置代理,能够将所有/apidomain开头的请求都通过npm run dev启动的express服务器重定向到目标接口

官方文档:https://vuejs-templates.github.io/webpack/proxy.html

proxyTable: {
  '/apidomain':{
  target:'http://localhost:prot',//或ip或域名。
  changeOrigin:true,
  pathRewrite: {
   '^/apidomain': ''
  }
  }
 },

若要通过IP在局域网访问h5,启动开发服务器的时候添加host参数即可

即package.json的dev命令配置如下

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",

关闭chrome安全策略实现跨域

windows中新建一个bat文件粘贴下面的命令即可以此模式打开

cd "C:\Program Files (x86)\Google\Chrome\Application" 
chrome.exe --disable-web-security --user-data-dir=c:/CorsUserData

asp.net core 服务端的CORS跨域设置

官方文档:https://docs.microsoft.com/zh-cn/aspnet/core/security/cors

在实际设置中,因为在h5端添加header参数产生了预检(OPTIONS)请求,看了上述文章后将通用参数修改到了query参数中

1. 添加cors服务

public void ConfigureServices(IServiceCollection services)
{
 //若只有部分接口则定义一个或多个命名的 CORS 策略,并在运行时按名称然后选择的策略,通过特性标记去设置跨域 详情见文档
 services.AddCors();
}

2. 启用中间件

//读取配置文件中设置的允许跨域的域名 CorsOrigins为一个数组 设置["*"]则会允许所有
var origins = Configuration.GetSection("CorsOrigins").GetChildren().Select(s => s.Value).ToArray();
app.UseCors(e =>
{
 e.WithOrigins(origins).AllowAnyHeader().AllowAnyMethod().AllowCredentials();
});
//Startup文件中Configuration对象的获取
public IConfiguration Configuration { get; }
public Startup()
{
 var builder = new ConfigurationBuilder()//...AddJsonFile($"appsettings.json");
 Configuration = builder.Build();
}

JSONP

JSONP只支持GET请求,CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器,以及可以向不支持CORS的网站请求数据。

Javascript 相关文章推荐
JavaScript判断一个URL链接是否有效的实现方法
Oct 08 Javascript
基于jquery & json的省市区联动代码
Jun 26 Javascript
jquery中 $.expr使用实例介绍
Jun 09 Javascript
使用jQuery将多条数据插入模态框的实现代码
Oct 08 Javascript
JavaScript调用客户端Java程序的方法
Jul 27 Javascript
AngularJS 基础ng-class-even指令用法
Aug 01 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 Javascript
JavaScript数组去重的几种方法
Apr 07 Javascript
java实现单链表增删改查的实例代码详解
Aug 30 Javascript
JavaScript实现随机点名器
Mar 25 Javascript
使用js和canvas实现时钟效果
Sep 08 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
vue项目中axios使用详解
Feb 07 #Javascript
vue-cli webpack2项目打包优化分享
Feb 07 #Javascript
浅谈es6中export和export default的作用及区别
Feb 07 #Javascript
Vue封装Swiper实现图片轮播效果
Feb 06 #Javascript
vue中如何使用ztree
Feb 06 #Javascript
javascript回调函数详解
Feb 06 #Javascript
原生JS实现瀑布流插件
Feb 06 #Javascript
You might like
php获取目录所有文件并将结果保存到数组(实例)
2013/10/25 PHP
php不写闭合标签的好处
2014/03/04 PHP
smarty内置函数{loteral}、{ldelim}和{rdelim}用法实例
2015/01/22 PHP
PHP互换两个变量值的方法(不用第三变量)
2016/11/14 PHP
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
javascript脚本调试方法小结
2008/11/24 Javascript
javascript 隔行换色函数代码
2010/10/24 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
2011/04/07 Javascript
JS字符串拼接在ie中都报错的解决方法
2014/03/27 Javascript
jquery选择器简述
2015/08/31 Javascript
js基于cookie方式记住返回页面用法示例
2016/05/27 Javascript
js实现上传图片预览方法
2016/10/25 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
详解在Node.js中发起HTTP请求的5种方法
2019/01/10 Javascript
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
python简单猜数游戏实例
2015/07/09 Python
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
Tensorflow 多线程设置方式
2020/02/06 Python
Python如何实现定时器功能
2020/05/28 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
Python+OpenCV图像处理——打印图片属性、设置存储路径、调用摄像头
2020/10/22 Python
Python 远程开关机的方法
2020/11/18 Python
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
2016/07/06 HTML / CSS
NBA欧洲商店(法国):NBA Europe Store FR
2016/10/19 全球购物
维多利亚的秘密阿联酋官网:Victoria’s Secret阿联酋
2019/12/07 全球购物
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
雷蛇美国官网:Razer
2020/04/03 全球购物
在校硕士自我鉴定
2014/01/23 职场文书
九年级体育教学反思
2014/01/23 职场文书
服务之星事迹材料
2014/05/03 职场文书
技术入股协议书
2016/03/22 职场文书
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL
解决mysql问题:由于找不到MSVCR120.dll,无法继续执行代码
2021/06/26 MySQL
安装Windows Server 2012 R2企业版操作系统并设置好相关参数
2022/04/29 Servers