详解Vue 开发模式下跨域问题


Posted in Javascript onJune 06, 2017

设置请求头部

  1. 后端设置请求头部Access-Control-Allow-Credentials: trueAccess-Control-Allow-Origin: www.xxx.com
  2. 前端post请求设置withCredentials=true
  3. 这里用了axios的请求数据方法代码如下:
import axios from 'axios'
import config from '../config'
export default {
request (method, uri, data, headerConfig = {withCredentials: true}) {
if (!method) {
 console.error('API function call requires method argument')
 return
}

if (!uri) {
 console.error('API function call requires uri argument')
 return
}

let url = config.serverURI + uri

return axios({ method, url, data, ...headerConfig })
}
}

jQuery的$.ajax::

$.ajax({
type: "POST",
url: "http://www.xxx.com/api.php",
dataType: 'json',
xhrFields: {
  withCredentials: true
},
crossDomain: true
}).then((json) => {
// balabala...
})

使用nodejs做代理

  1. 上面的那种方法需要后端配合设置头部,对于我这种前端小白来讲,联调时各种不成功的报错也无从解决,所以个人比较倾向于下面这种做法,鉴于使用脚手架vue-cli创建的项目,作者已经给我提供好了解决的方法。
  2. 找到项目文件夹下的config/index.js, 里面有一行proxyTable: {}, 这里就是作者为我们留的接口, 我们添加代理规则进去
var path = require('path')
module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../xxx/index.html'),
assetsRoot: path.resolve(__dirname, '../xxx'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
productionSourceMap: true,
productionGzip: false,
productionGzipExtensions: ['js', 'css']
},
dev: {
env: require('./dev.env'),
port: 8080,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
 '/api': {
  target: 'http://www.xxx.com/api.php/',
  changeOrigin: true,
  pathRewrite: {
   '^/api': '/'
  }
 }
},
cssSourceMap: false
}
}

这里target为目标域名,pathRewrite为转换规则,请求数据时将接口地址 根据转换规则请求就可以解决跨域啦!(这里也可以配置headers,设置cookis,token等)

jsonp

jsonp也是一种解决跨域的方法,不过我从来没有用过,在网上查了下资料,jsonp的原理是script标签引入js是不受域名限制的, 由于是模拟插入script标签, 所以不可以用post请求。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery页面图片切换和新闻列表滚动效果的具体实现
Sep 26 Javascript
JS实现静止元素自动移动示例
Apr 14 Javascript
jQuery中clearQueue()方法用法实例
Dec 29 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
Jan 09 Javascript
JavaScript日期选择功能示例
Jan 16 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
深入浅析Vue中的Prop
Jun 10 Javascript
mpvue写一个CPASS小程序的示例
Sep 04 Javascript
JointJS流程图的绘制方法
Dec 03 Javascript
Js图片点击切换轮播实现代码
Jul 27 Javascript
在antd Table中插入可编辑的单元格实例
Oct 28 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
Jun 06 #Javascript
深入理解vue-loader如何使用
Jun 06 #Javascript
利用webstrom调试Vue.js单页面程序的方法教程
Jun 06 #Javascript
JavaScript实现一个空中避难的小游戏
Jun 06 #Javascript
vue脚手架vue-cli的学习使用教程
Jun 06 #Javascript
D3.js进阶系列之CSV表格文件的读取详解
Jun 06 #Javascript
JavaScript实现移动端轮播效果
Jun 06 #Javascript
You might like
PHP的PSR规范中文版
2013/09/28 PHP
谈谈PHP连接Access数据库的注意事项
2016/08/12 PHP
浅谈PHP的exec()函数无返回值排查方法(必看)
2017/03/31 PHP
thinkphp查询,3.X 5.0方法(亲试可行)
2017/06/17 PHP
php实现二叉树中和为某一值的路径方法
2018/10/14 PHP
Yii2框架配置文件(Application属性)与调试技巧实例分析
2019/05/27 PHP
jQuery学习7 操作JavaScript对象和集合的函数
2010/02/07 Javascript
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
2014/08/15 Javascript
javascript中attachEvent用法实例分析
2015/05/14 Javascript
js如何判断输入字符串长度
2015/12/16 Javascript
Zabbix添加Node.js监控的方法
2016/10/20 Javascript
nodejs实例解析(输出hello world)
2017/01/03 NodeJs
微信小程序教程系列之新建页面(4)
2017/04/17 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
2017/06/05 Javascript
node.js中grunt和gulp的区别详解
2017/07/17 Javascript
npm全局模块卸载及默认安装目录修改方法
2018/05/15 Javascript
BootstrapValidator验证用户名已存在(ajax)
2019/11/08 Javascript
vue 点击其他区域关闭自定义div操作
2020/07/17 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
WebStorm中如何将自己的代码上传到github示例详解
2020/10/28 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
python获取豆瓣电影简介代码分享
2014/01/16 Python
Python计算回文数的方法
2015/03/11 Python
详解Python是如何实现issubclass的
2019/07/24 Python
python爬虫爬取幽默笑话网站
2019/10/24 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
DAWGS鞋官方网站:鞋,凉鞋,靴子
2016/10/04 全球购物
学生就业推荐信
2013/11/13 职场文书
英语求职信范文
2014/05/23 职场文书
小学综合实践活动总结
2014/07/07 职场文书
机电一体化应届生求职信
2014/08/09 职场文书
环保项目建议书
2014/08/26 职场文书
检讨书范文300字
2015/01/28 职场文书
2015年社区宣传工作总结
2015/05/20 职场文书