详解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 相关文章推荐
如何让动态插入的javascript脚本代码跑起来。
Jan 09 Javascript
Javascript条件判断使用小技巧总结
Sep 08 Javascript
javascript面向对象的方式实现的弹出层效果代码
Jan 28 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
Apr 14 Javascript
js自定义select下拉框美化特效
May 12 Javascript
了解VUE的render函数的使用
Jun 08 Javascript
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
微信小程序使用modal组件弹出对话框功能示例
Nov 29 Javascript
js中this对象用法分析
Jan 05 Javascript
vuex actions传递多参数的处理方法
Sep 18 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
vue点击按钮实现简单页面的切换
Sep 08 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
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
php SQL Injection with MySQL
2011/02/27 PHP
php设计模式 Builder(建造者模式)
2011/06/26 PHP
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
2012/01/12 PHP
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
ThinkPHP行为扩展Behavior应用实例详解
2014/07/22 PHP
php正则提取html图片(img)src地址与任意属性的方法
2017/02/08 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
JavaScript Accessor实现说明
2010/12/06 Javascript
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
2014/06/15 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
微信小程序页面间通信的5种方式
2017/03/31 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
2017/09/12 Javascript
详解基于Wepy开发小程序插件(推荐)
2019/08/01 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
2019/11/04 Javascript
vue学习笔记之给组件绑定原生事件操作示例
2020/02/27 Javascript
微信小程序吸底区域适配iPhoneX的实现
2020/04/09 Javascript
eslint+prettier统一代码风格的实现方法
2020/07/22 Javascript
深入学习Python中的上下文管理器与else块
2017/08/27 Python
python实现壁纸批量下载代码实例
2018/01/25 Python
python判断输入日期为第几天的实例
2018/11/13 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
Django 开发调试工具 Django-debug-toolbar使用详解
2019/07/23 Python
解决Python3下map函数的显示问题
2019/12/04 Python
阿玛瑞酒店中文官方网站:Amari.com
2018/02/13 全球购物
教师自我鉴定范文
2013/11/10 职场文书
四年的个人工作自我评价
2013/12/10 职场文书
银行实习鉴定
2013/12/13 职场文书
消防安全承诺书
2014/05/22 职场文书
2014年光棍节活动策划方案(创意集锦)
2014/09/29 职场文书
迁户口计划生育证明
2014/10/19 职场文书
大学生党性分析材料
2014/12/19 职场文书
初中生思想道德自我评价
2015/03/09 职场文书