文档章节

详解Vue 开发模式下使用nodejs解决跨域问题

 青衫旧巷
发布于 2017/08/16 17:10
字数 824
阅读 412
收藏 0

详解Vue 开发模式下直接利用 Node.js 代理服务器,实现跨域请求

本篇文章主要介绍了Vue 开发模式下跨域问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

使用nodejs做代理

1、鉴于vue使用脚手架vue-cli创建的项目,作者已经给提供好了解决的方法。

2、找到项目文件夹下的config/index.js, 里面有一行proxyTable: {}, 这里就是作者为我们留的接口, 我们添加代理规则进去

// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')

module.exports = {
    build: {
        env: require('./prod.env'),
        index: path.resolve(__dirname, '../dist/index.html'),
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        productionSourceMap: true,
        // Gzip off by default as many popular static hosts such as
        // Surge or Netlify already gzip all static assets for you.
        // Before setting to `true`, make sure to:
        // npm install --save-dev compression-webpack-plugin
        productionGzip: false,
        productionGzipExtensions: ['js', 'css'],
        // Run the build command with an extra argument to
        // View the bundle analyzer report after build finishes:
        // `npm run build --report`
        // Set to `true` or `false` to always turn it on or off
        bundleAnalyzerReport: process.env.npm_config_report
    },
    dev: {
        env: require('./dev.env'),
        port: 8093,
        autoOpenBrowser: true,
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
            '/account': {
                target: 'http://10.143.47.26:8080',
                changeOrigin: true,
            },
            '/services': {
                target: 'http://10.143.47.26:8080',
                changeOrigin: true,
            },
            '/api': {
                target: 'http://www.xxx.com/api.php/',
                changeOrigin: true,  
                pathRewrite: {
                    '^/api': '/' 
                }
            },
        },
        // CSS Sourcemaps off by default because relative paths are "buggy"
        // with this option, according to the CSS-Loader README
        // (https://github.com/webpack/css-loader#sourcemaps)
        // In our experience, they generally work as expected,
        // just be aware of this issue when enabling this option.
        cssSourceMap: false
    }
}

这里target:为目标域名,pathRewrite为转换规则,请求数据时将接口地址 根据转换规则请求就可以解决跨域啦!(这里也可以配置headers,设置cookis,token等)

通过设置changeOrigin:true: 开启代理

pathRewrite: 意为重写路径

'^/api': '/': 由于'^/api'是虚拟目录实际上是不存在的,不去掉的话会变成'http://127.0.0.1:3000/api',所以得去掉 配置了上面的参数后,在调用时就要(这里用的是axios,例如地址是http://127.0.0.1:3000/aaa)

比如要请求的接口为http://192.168.400:3000/main/getUserInfo.action

axios.post('/api/main/getUserInfo.action', {})
          .then(function (response) {
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          });

为什么要有个‘/api’?因为步骤1那里写的是‘/api’,那怎么办?别忘了,因为用的是axios,所以可以配置一下baseURL ,我这里就全局配置baseURL

在实际工作中,我们还需要做些其他的,比如在axios中配置baseUrl:

import axios from 'axios';

// 添加响应拦截器
axios.interceptors.request.use(function (config) {
 // 配置发送请求的信息

 return config;
}, function (error) {
 return Promise.reject(error);
});

axios.interceptors.response.use(function (response) {
 // 配置请求回来的信息

 return response;
}, function (error) {
 return Promise.reject(error);
});

var http = axios.create({
 timeout: 8000, /*设置请求超时时间*/
 baseURL:'http://192.168.400:3000', 

});

//axios.defaults.baseURL = '/api'   //这个是别的重写全局配置baseURL

// Alter defaults after instance has been created
http.defaults.headers.common['Authorization'] = '';

export default http; 

/**导出http,在mainjs中引用
import http from './config/axiosConfig';
Vue.prototype.$http = http;
**/

其中 '/api' 为匹配项,target 为被请求的地址 因为在 ajax 的 url 中加了前缀 '/api',而原本的接口是没有这个前缀的 所以需要通过 pathRewrite 来重写地址,将前缀 '/api' 转为 '/' 如果本身的接口地址就有 '/api' 这种通用前缀,就可以把 pathRewrite 删掉

参考地址:http://www.jianshu.com/p/88d41de7f4b5

http://www.jb51.net/article/115495.htm

© 著作权归作者所有

粉丝 1
博文 61
码字总数 35826
作品 0
东城
私信 提问
vue+node实现前后端分离

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wen_special/article/details/89217813 之前一直听说前后端分离好,但从来没有自己动手实践过!因为发现了对于...

wen_special
04/11
0
0
vue框架搭建之axios使用教程

本文重点介绍axios如何配合vue搭建项目框架,而axios的详细使用介绍请移步 1、安装 2、引入main.js 文件引入: 3、使用 4、跨域与代理在vue本地开发时请求总是发生跨域解决方案:配置代理con...

前端攻城老湿
2018/11/22
0
0
Vue实现前后端分离项目的初体验

Vue实现前后端分离项目的初体验 经过之前学习的Vue的知识: vue基本指令 vue组件 vue-resource vue路由 其实我们已经可以开始实战运用到实际的Web项目中了,由于本人是Java后端开发的,所以后...

TyCoding
2018/09/01
2.1K
0
【新手向】Vue.js + Node.js(koa) 合体指南

webpack 大法好 Webpack 是大家熟知的前端开发利器,它可以搭建包含热更新的开发环境,也可以生成压缩后的生产环境代码,还拥有灵活的扩展性和丰富的生态环境。但它的缺点也非常明显,那就是...

小蘑菇哥哥
01/02
0
0
UEDITOR的JSONP跨域请求失败

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sd19871122/article/details/86840968 最近在做VUE嵌入UEditor并且上传到七牛云, 废话不多说了 ueditor.conf...

飞翔的熊blabla
02/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring使用ThreadPoolTaskExecutor自定义线程池及实现异步调用

多线程一直是工作或面试过程中的高频知识点,今天给大家分享一下使用 ThreadPoolTaskExecutor 来自定义线程池和实现异步调用多线程。 一、ThreadPoolTaskExecutor 本文采用 Executors 的工厂...

CREATE_17
今天
5
0
CSS盒子模型

CSS盒子模型 组成: content --> padding --> border --> margin 像现实生活中的快递: 物品 --> 填充物 --> 包装盒 --> 盒子与盒子之间的间距 content :width、height组成的 内容区域 padd......

studywin
今天
7
0
修复Win10下开始菜单、设置等系统软件无法打开的问题

因为各种各样的原因导致系统文件丢失、损坏、被修改,而造成win10的开始菜单、设置等系统软件无法打开的情况,可以尝试如下方法解决 此方法只在部分情况下有效,但值得一试 用Windows键+R打开...

locbytes
昨天
8
0
jquery 添加和删除节点

本文转载于:专业的前端网站➺jquery 添加和删除节点 // 增加一个三和一节点function addPanel() { // var newPanel = $('.my-panel').clone(true) var newPanel = $(".triple-panel-con......

前端老手
昨天
8
0
一、Django基础

一、web框架分类和wsgiref模块使用介绍 web框架的本质 socket服务端 与 浏览器的通信 socket服务端功能划分: 负责与浏览器收发消息(socket通信) --> wsgiref/uWsgi/gunicorn... 根据用户访问...

ZeroBit
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部