详解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 相关文章推荐
破解Session cookie的方法
Jul 28 Javascript
Javascript 类与静态类的实现
Apr 01 Javascript
JQuery通过Ajax提交表单并返回结果
Jul 31 Javascript
ejs v9 javascript模板系统
Mar 21 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
Nov 24 Javascript
JavaScript学习小结(7)之JS RegExp
Nov 29 Javascript
JavaScript动态设置div的样式的方法
Dec 26 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
May 18 Javascript
jquery实现点击页面回到顶部
Nov 23 Javascript
详解Angular的数据显示优化处理
Dec 26 Javascript
使用JS判断移动端手机横竖屏状态
Jul 30 Javascript
nuxt.js写项目时增加错误提示页面操作
Nov 05 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
thinkphp控制器调度使用示例
2014/02/24 PHP
php简单分页类实现方法
2015/02/26 PHP
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
JavaScript栏目列表隐藏/显示简单实现
2013/04/03 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
JavaScript学习总结之JS、AJAX应用
2016/01/29 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
原生javascript 学习之js变量全面了解
2016/07/14 Javascript
js实现四舍五入完全保留两位小数的方法
2016/08/02 Javascript
jquery滚动条插件(可以自定义)
2016/12/11 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
jquery实现一个全局计时器(商城可用)
2017/06/30 jQuery
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
Vue.js中的高级面试题及答案
2020/01/13 Javascript
python安装numpy和pandas的方法步骤
2019/05/27 Python
python实现接口并发测试脚本
2019/06/25 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
pybind11在Windows下的使用教程
2019/07/04 Python
Python数组并集交集补集代码实例
2020/02/18 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
python 无损批量压缩图片(支持保留图片信息)的示例
2020/09/22 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
让IE支持HTML5的方法
2012/12/11 HTML / CSS
大学信息公开实施方案
2014/03/09 职场文书
2014年社会实践活动总结范文
2014/04/29 职场文书
工厂标语大全
2014/10/06 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python
php实例化对象的实例方法
2021/11/17 PHP
python自动化测试通过日志3分钟定位bug
2021/11/20 Python
Python装饰器的练习题
2021/11/23 Python
Python查找算法的实现 (线性、二分,分块、插值查找算法)
2022/04/24 Python