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 数组的 uniq 方法
Jan 23 Javascript
js弹窗代码 可以指定弹出间隔
Jul 03 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
Apr 12 Javascript
JavaScript中的关键字"VAR"使用详解 分享
Jul 31 Javascript
js闭包实例汇总
Nov 09 Javascript
Javascript编写俄罗斯方块思路及实例
Jul 07 Javascript
JavaScript学习小结(7)之JS RegExp
Nov 29 Javascript
js+ajax实现获取文件大小的方法
Dec 08 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
Mar 06 Javascript
vue将后台数据时间戳转换成日期格式
Jul 31 Javascript
对layui中table组件工具栏的使用详解
Sep 19 Javascript
微信小程序图片右边加两行文字的代码
Apr 23 Javascript
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的POSIX 函数以及进程测试的深入分析
2013/06/03 PHP
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
2012/01/15 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
浅谈JS继承_寄生式继承 & 寄生组合式继承
2016/08/16 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
URL中“#” “?” &“”号的作用浅析
2017/02/04 Javascript
如何写好你的JavaScript【推荐】
2017/03/02 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
2017/04/26 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
2017/05/28 Javascript
详解AngularJS跨页面传值(ui-router)
2017/08/23 Javascript
vue.js路由跳转详解
2017/08/28 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
2018/07/12 Javascript
Vue通过ref父子组件拿值方法
2018/09/12 Javascript
vscode下vue项目中eslint的使用方法
2019/01/13 Javascript
js cavans实现静态滚动弹幕
2020/05/21 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
Postman无法正常返回结果问题解决
2020/08/28 Javascript
js实现简单的无缝轮播效果
2020/09/05 Javascript
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
python实现目录树生成示例
2014/03/28 Python
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
彻底理解Python list切片原理
2017/10/27 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
Python项目打包成二进制的方法
2020/12/30 Python
香港时尚女装购物网站:ZAFUL
2017/07/19 全球购物
Anthropologie英国:美国家喻户晓的休闲服装和家居产品品牌
2018/12/05 全球购物
Java和Javasciprt的区别
2012/09/02 面试题
运动会广播稿50字
2014/01/26 职场文书
理财投资建议书
2014/03/12 职场文书
行政工作试用期自我评价
2014/09/14 职场文书
八项规定整改方案
2014/10/01 职场文书
学校运动会广播稿
2014/10/11 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
SQLServer2019 数据库环境搭建与使用的实现
2021/04/08 SQL Server
MySQL update set 和 and的区别
2021/05/08 MySQL