欢迎进入广州凡科互联网科技有限公司网站
全国服务热线
4000-399-000
微信报名小程序开发_新版vue
时间: 2021-01-08 15:40 浏览次数:
新版本vue-cli模版下当地开发设计自然环境应用node网络服务器跨域的方式 本文关键详细介绍了新版本vue-cli模版下当地开发设计自然环境应用node网络服务器跨域的方式,网编感觉挺
新版vue-cli模板下本地开发环境使用node服务器跨域的方法       这篇文章主要介绍了新版vue-cli模板下本地开发环境使用node服务器跨域的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

我们都知道浏览器有一个既核心也最基本的安全功能,即同源策略。同源分别是:协议,域名,端口。如果浏览器访问服务器不同源的话,就会访问不到数据。那开发中常常访问的服务器不同源,那么可以借助一个服务器当做中介来访问需要访问的服务器从而获得数据。因为同源策略是浏览器的安全机制,而服务器之间是不受此限制的。之前vue-cli模板build文件夹下有dev-serve.js文件,可以在此文件中配置本地node服务器实现跨域,现在的模板下没有此文件,那我们该如何使用node跨域呢?不逼逼,上方法。

具体操作

1、在build文件夹下面新建一个dev-serve.js文件,其中添加代码如下:

'use strict'
const express = require('express')
const axios = require('axios')
module.exports = function () {
 let app = express()
 app.get('/api/getDiscList', (req, res) = {
 let url = '请求地址'
 axios.get(url, {
 headers: {
 //这里请求的是QQ音乐的接口,带上下面参数是为了骗服务器是自己人
 referer: '',
 host: 'c.'
 params: req.query
 }).then((response) = {
 res.json(response.data)
 }).catch((e) = {
 console.log(e)
 app.listen(3000)

2、在build.js中引入并且运行只需要在最上面添加 require('./dev-serve.js')()

当我们npm run dev运行项目的时候,node服务器就会启动自动监听3000端口

3.本地发送ajax请求,就可以通过node服务器访问到数据,请求我使用的是axios。请求如下:

import axios from 'axios'
function getDiscList() { 
 const data = {
 //...请求参数
 return axios.get('/api/getDiscList', {
 params: data
 }).then(res = {
 return Promise.resolve(res.data)

请求到数据如下:

结语

如此就简单实现了本地node服务器跨域,在开发环境下是可以请求到数据,但是npm run build 打包成静态文件后就失效了。路还很长,还请各位不吝赐教。

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


下一篇:没有了


Copyright © 广州凡科互联网科技有限公司 版权所有 粤ICP备10235580号
全国服务电话:4000-399-000   传真:021-45545458
公司地址:广州市海珠区工业大道北67号凤凰创意园