一、jsonp跨域 npm install jsonp

然后創建一個jsonp.js 來使用jsonp import oringinJSONP from 'jsonp'

export default function jsonp(url, data, option) { url += (url.indexOf('?') < 0 ? '?' : '&') + param(data) //返回一個promise對象 return new Promise((resolve, reject) => { //resolve成功 reject失敗 oringinJSONP( url, option, (err, data) => { if( !err ) { resolve(data); } else { reject(err) } }) }) }

function param( data ) { //拼接參數 let url = ''; for( var k in data) { let value = data[k] !== undefined ? data[k] : ''; url += &${k}=${encodeURIComponent(value)} } return url ? url.substring(1) : '' }

然后，創建一個方法使用上面的jsonp()

import jsonp from 'common/js/jsonp' import {commonParams, options} from './config' export function getRecommend() { //暴露一個方法 讓人調用 const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg' //Object.assign()合并對象鍵和值 const data = Object.assign( {}, commonParams, { uin:0, platform:'h5', needNewCode:1 }) return jsonp(url, data, options) } 最后使用 import { getRecommend, songsList } from 'api/recommend'; getRecommend().then( (res) => { if(res.code === ERR_OK) { this.recommonds = res.data.slider; } });

二、使用axios進行跨域處理 在dev-server.js中， const app = express()

var axios = require('axios') //引入axios var apiRoutes = express.Router()

apiRoutes.get('/songsList', function( req, res ) { var url = "https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg"; axios.get(url, { headers: { referer: 'https://m.y.qq.com/', host: 'c.y.qq.com' }, params: req.query }).then( (response) => { res.json(response.data) }).catch( (e) => { console.log(e); }) });

app.use('/api', apiRoutes);

然后在目標js中 function songsList() { const url = '/api/songsList' const data = Object.assign( {}, commonParams, { uin:0, platform:'h5', needNewCode:1, format: 'json' }) return axios.get(url, { params: data }).then((res) => { return Promise.resolve(res.data) }) } 然后執行songsList(),這種類似與欺詐的方法修改了請求頭的host 和 referer，這樣可以繞過同源策略的檢測，進而達到跨域獲取數據的效果。

總結

以上是生活随笔為你收集整理的前端vue框架的跨域处理方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。