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 相关文章推荐
checkbox 多选框 联动实现代码
Oct 22 Javascript
基于jquery的让textarea自适应高度的插件
Aug 03 Javascript
Checbox的操作含已选、未选及判断代码
Nov 07 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
May 04 Javascript
BootStrap Validator使用注意事项(必看篇)
Sep 28 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
Sep 05 Javascript
详解Vue 事件修饰符capture 的使用
Dec 29 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
Sep 28 Javascript
微信小程序自定义轮播图
Nov 04 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 Javascript
微信小程序实现音乐播放器
Nov 20 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 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在linux下检测mysql同步状态的方法
2015/01/15 PHP
smarty内置函数capture用法分析
2015/01/22 PHP
Laravel事件监听器用法实例分析
2019/03/12 PHP
phpmyadmin在宝塔面板里进不去的解决方案
2020/07/06 PHP
jquery下操作HTML控件的实现代码
2010/01/12 Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
2010/05/24 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
jquery+html5制作超酷的圆盘时钟表
2015/04/14 Javascript
js窗口关闭提示信息(兼容IE和firefox)
2015/10/23 Javascript
JS设置cookie、读取cookie
2016/02/24 Javascript
JavaScript获取URL中参数querystring的方法详解
2016/10/11 Javascript
jQuery中页面返回顶部的方法总结
2016/12/30 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
2017/03/21 Javascript
bootstrap-Treeview实现级联勾选
2017/11/23 Javascript
vue+element 实现商城主题开发的示例代码
2020/03/26 Javascript
Python函数式编程指南(四):生成器详解
2015/06/24 Python
Python中Django发送带图片和附件的邮件
2017/03/31 Python
Python numpy 常用函数总结
2017/12/07 Python
TensorFlow实现Batch Normalization
2018/03/08 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
Python中PyQt5/PySide2的按钮控件使用实例
2019/08/17 Python
python并发编程多进程之守护进程原理解析
2019/08/20 Python
python3.7 openpyxl 删除指定一列或者一行的代码
2019/10/08 Python
python利用opencv实现SIFT特征提取与匹配
2020/03/05 Python
django项目中新增app的2种实现方法
2020/04/01 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
Emma Bridgewater官网:英国餐具制造商
2019/11/24 全球购物
主管职责范文
2013/11/09 职场文书
英文自荐信
2013/12/15 职场文书
法人授权委托书样本
2014/09/19 职场文书
2014年财务部工作总结
2014/11/11 职场文书
故宫英文导游词
2015/01/31 职场文书
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js
JavaScript声明变量和数据类型的转换
2022/04/12 Javascript