Vue vue-jsonp 跨域

vue-jsonp

● npm 安装 vue-jsonp

npm install vue-jsonp --save
npm i vue-jsonp

● 用法
静态函数: Vue.jsonp(url, dataObj, timeout)
在Vue组件中: this.$jsonp(url, dataObj, timeout)

● src/main.js 中添加

import Vue from 'vue'
import VueJsonp from 'vue-jsonp'
Vue.use(VueJsonp)

● 其它组件中基本使用方法【在任意.vue文件中使用】

/* 方式1【在Vue组件中】 */
var param = {header: { "content-type": "application/xml" }callbackQuery: "callbackParam",callbackName: "jsonpCallback"
}
this.$jsonp(`http://api.com:9093/api/v1/sso/token`, param).then(res => {console.log(res)
}).catch(err => {console.log(err)
})/* 方式2【在Vue组件中】 */
this.$jsonp(`http://api.com:9093/api/v1/sso/token`, {callbackQuery: "callbackParam", callbackName: "jsonpCallback" }).then((json) => {// 返回的jsonp数据不会放这里，而是在 window.jsonpCallbackconsole.log(json)
}).catch(err => {console.log(err)
})/* 方式3【在Vue组件中】 */
methods: {handleLogin() {this.$jsonp('http://api.com:9093/api/v1/sso/token', { callbackName: 'callback' }).then(res => {console.log(res)}).catch(err => {console.log(err)})}
}

● 静态函数【在 src/store/modules/user.js 文件中使用】

import Vue from 'vue'
import { login, logout, getInfo, getSsoToken } from '@/api/user'
import { getToken, setToken, removeToken } from '@/utils/auth'
import router, { resetRouter } from '@/router'const state = {token: getToken(),name: '',avatar: '',introduction: '',roles: []
}const mutations = {SET_TOKEN: (state, token) => {state.token = token},SET_INTRODUCTION: (state, introduction) => {state.introduction = introduction},SET_NAME: (state, name) => {state.name = name},SET_AVATAR: (state, avatar) => {state.avatar = avatar},SET_ROLES: (state, roles) => {state.roles = roles}
}const actions = {getSsoToken() {return new Promise((resolve, reject) => {console.log(`Ln 105 /src/store/modules/user.js `)Vue.jsonp('http://api.com:9093/api/v1/sso/token', { callbackName: 'callback' }).then(res => {const { data } = resconsole.log(`Ln 108 ${JSON.stringify(res)}`)if (!data) {reject('Verification failed, please Login again.')}const { token } = dataconsole.log(`Ln 85 ${token}`)if (!token || token.length <= 0) {console.log(`Ln 113 /src/store/modules/user.js 没有token`)// reject('getSsoToken: token must be a non-null array!')}resolve(data)}).catch(error => {console.log(`Ln 125 /src/store/modules/user.js ${error}`)reject(error)})})}
}export default {namespaced: true,state,mutations,actions
}

● 静态函数【在 src/permission.js 文件中使用】

import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import { getToken } from '@/utils/auth' // get token from cookie
import getPageTitle from '@/utils/get-page-title'
import Vue from 'vue'NProgress.configure({ showSpinner: false }) // NProgress Configurationconst whiteList = ['/login', '/auth-redirect'] // no redirect whitelistrouter.beforeEach(async(to, from, next) => {NProgress.start()document.title = getPageTitle(to.meta.title)const hasToken = getToken()/* 【方式1】调用 src/store/modules/user.js 文件中 getSsoToken() 方法 */const sso = await store.dispatch('user/getSsoToken')console.log(`Ln 87 ${JSON.stringify(sso)}`)if (sso.token) {console.log(`Ln 89 有 ssotoken`)} else {console.log(`Ln 91 没有 ssotoken`)// next(`/login?redirect=${to.path}`)// window.location.href = `http://jy.management.com:9093/#/login?redirect=${window.location}${to.path}`}/* 【方式2】直接调用 jsonp */Vue.jsonp('http://api.com:9093/api/v1/sso/token', { callbackName: 'callback' }).then(res => {console.log(`Ln 100 ${JSON.stringify(res)}`)}).catch(err => {console.log(err)})if (whiteList.indexOf(to.path) !== -1) {// in the free login whitelist, go directlynext()}
})router.afterEach(() => {// finish progress barNProgress.done()
})

● 后台方法
跨域访问【注意：只支持get请求，不支持post请求】
● JQuery对于Ajax的跨域请求有两类解决方案，都是只支持get方式。分别是JQuery的 ajax jsonp格式和jquery.getScript方式。
● 要使用跨源请求发送凭据，客户端必须设置为：withCredentials: true
● 后端需要添加一个解决跨域方位的过滤器
API接口

[HttpGet("token")]
public IActionResult GetCookie()
{string token = string.Empty;HttpContext.Request.Cookies.TryGetValue("center-token", out token);LogUtils.GetInstance().Info("Ln 24 " + token);var user = new SsoVo { token = token };return Ok("callback(" + JsonConvert.SerializeObject(new { code = "200", data = new { token = token, ticket = "1234567890abcd" } }) + ")");
}[HttpGet("LoginJsonp")]
public IActionResult LoginJsonp()
{return Ok("callback(" + JsonConvert.SerializeObject(new { code = "200" }) + ")");
}[HttpGet("GetTicket")]
public IActionResult GetTicket()
{HttpContext.Response.Cookies.Append("password", "123456");HttpContext.Response.Cookies.Append("time", "abcd");return Ok("callback(" + JsonConvert.SerializeObject(new { code = "200", data = new { ticket = "1234567890abcd" } }) + ")");
}[HttpGet("GetTicketNew")]
public IActionResult GetTicketNew()
{return Content("jsonpscall(" + JsonConvert.SerializeObject(new { code = "200", data = new { ticket = "1234567890abcd" } }) + ")");
}

*
*
*
*
*
*

Vue vue-jsonp 跨域相关推荐

怎么实现跨域？配置vue跨域proxy，jsonp跨域很简单
如果不设置跨域需要跨域的接口是 https://sug.so.360.cn/suggest?word=a word 是参数怎么设置跨域 1.vue的跨域第一步在 vue 的根目录创建一个 vu ...
vue开发环境跨域与生产环境跨域
常见的跨域的方式同源策略所谓同源(即指在同一个域)具有以下三个相同点协议相同(protocol) 主机相同(host) 端口相同(port) jsonp JSONP的原型:创建一个回调函数,然后 ...
26、vue前端出现跨域问题，如何解决跨域？
问题: 因为浏览器的同源策略的限制问题(协议.主机.端口一致),浏览器访问非同源的网址时,会出现无法获取数据(已发请求,服务器已收到请求),出现跨域问题 3种解决方法: 1.cors跨域(配置服务器) ...
解决Vue前后端跨域问题的多种方式
1 前言本文主要介绍借助解决Vue前后端跨域问题的几种方式说到ajax请求,就不得不说下xhr(XMLHttpRequest)了,它可以说是鼻祖,但是实际开发中,我们不会直接使用它,而是进行二次封 ...
vue 引入pdf跨域问题怎么解决_VUE项目中的跨域问题
[摘要]跨域问题是前端开发人员比较常见的问题, 那么跨域出现的原因, 该如何解决跨域, VUE中对跨域又是怎样处理的呢 [作者]田鋆鹏一. 前端为什么会出现跨域问题? 跨域问题是浏览器同源策略限制, ...
vue脚手架解决跨域问题-------配置反向代理
vue脚手架解决跨域问题-------配置反向代理参考文章: (1)vue脚手架解决跨域问题-------配置反向代理 (2)https://www.cnblogs.com/zbx-boke/p/9 ...
webpack+vue解决前端跨域问题
webpack+vue解决前端跨域问题参考文章: (1)webpack+vue解决前端跨域问题 (2)https://www.cnblogs.com/wei-dong/p/10689072.html ...
vue : 本地调试跨域问题的解决办法：proxyTable
vue : 本地调试跨域问题的解决办法:proxyTable 参考文章: (1)vue : 本地调试跨域问题的解决办法:proxyTable (2)https://www.cnblogs.com/fo ...
vue脚手架解决跨域
vue脚手架解决跨域 1.什么是跨域 1.浏览器,端口,域名只要有一项不同就会产生跨域,协议域名端口都相同才同域,否则都是跨域 2.如何解决跨域 1.首先在vue脚手架的根目录下创建一个vue.con ...
Vue解决Axios跨域问题
提前声明:本文只针对使用vue-cli创建的vue项目,范围仅限于vue2 跨域跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器施加的安全限制解决跨域话不多说,直 ...

Vue vue-jsonp 跨域

Vue vue-jsonp 跨域相关推荐

最新文章

热门文章