web前端

vue开发环境和生产环境里面解决跨域的几种方法

2019-05-24 16:36:25

什么是跨域

跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议,端口,域名。只要这个3个中有一个不同就是跨域。 这里列举一个经典的列子:

#协议跨域
http://a.baidu.com访问https://a.baidu.com;
#端口跨域
http://a.baidu.com:8080访问http://a.baidu.com:80;
#域名跨域
http://a.baidu.com访问http://b.baidu.com;

现在很多公司都是采用前后分离的方式开发。那么出现经常和会跨域打交道。我这里整理日常开发中解决跨域的几种方案。我们前端使用的Vue,后端使用的NodeJs。

解决方案

proxyTable

这里vue脚手架生成的标准项目为准。一般在项目config目录下面有个index文件。里面格式如下:


'use strict'
const path = require('path')
module.exports = {
    dev: {
        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
            '/api': {
                target: 'http://localhost:7001',//后端接口地址
                changeOrigin: true,//是否允许跨越
                pathRewrite: {
                    '^/api': '/api',//重写,
                }
            }
        },
        host: '192.168.0.104',
        port: 8081,
        autoOpenBrowser: false,
        errorOverlay: true,
        notifyOnErrors: true,
        poll: false,
        useEslint: true,
        showEslintErrorsInOverlay: false,
        devtool: 'eval-source-map',
        cacheBusting: true,
        cssSourceMap: false,
    },

}

上面配置中,我们根据实际情况只需要修改proxyTable对于配置即可。假设我后端请求地址是http://localhost:7001,所有api的接口url都以/api开头。所以首先需要匹配所有以/api开头的.然后修改target的地址为http://localhost:7001。最后修改pathRewrite地址。将前缀 '^api' 转为 '/api'。如果本身的接口地址就有 '/api' 这种通用前缀,就可以把 pathRewrite 删掉。注意这个方式只能在开发环境中使用。

CORS

CORS即跨源资源共享,它定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。它是一个妥协,有更大的灵活性,但比起简单地允许所有这些的要求来说更加安全。但是CORS也具有一定的风险性,比如请求中只能说明来自于一个特定的域但不能验证是否可信,而且也容易被第三方入侵。 这里一般需要后端配合,开启cors。一般各种语言都有类似的包。比如NodeJS的koa2-cors


var koa = require('koa');
//npm install --save koa2-cors
var cors = require('koa2-cors');
var app = koa();
//开启
app.use(cors());

这个方式解决的跨越问题支持开发和生产环境。但是有一定的安全性问题。

Nginx

当我们明白跨越的含义之后。只要解决了'源'的问题。那么跨越也就不存在了。这里我们便会想到proxy,同时也会想到Nginx。

enter image description here
我们只需要在部署静态资源配置下面加上红框里面的配置就可以了。同时这个方法支持开发环境和生产环境。

后端程序代理

当然上面2个方法都需要后端的配合和需要修改服务器配置。所有还有一种方法不需要他们配合 ,我们自己就可以做到。就是我们自己启一个后端程序做代理。然后把所有的请求转发到服务器。这里要用到node的一个包http-proxy-middleware。关键代码(express)如下

enter image description here

上面4种方式都能解决vue跨域问题。当然肯定还有别的方式。至于在生产环境中怎么部署需要各位自己去衡量了。同时也希望大家给出更好的解决方案。


转自 进击的小羊驼 


统计:
0 评论
0 查看


马上批阅

评论该篇文章

Laravel技术交流群
扫码关注体验小程序
小程序二维码 小程序码
站长最新说说动态

欢迎来到追梦小窝,有什么值得收藏的就拿去用吧,不客气,大部分内容来自互联网,如有侵犯版权请您注明来信,我将会第一时间妥善处理


最新评论
共6条评论
image
2017-07-07 14:04:55 追梦小窝 评论了 今天画了一个小图标
来自:59.40.248.60
@皮皮豪:我QQ543619552
image
2017-07-07 14:04:27 追梦小窝 评论了 emlog缩略图不同实现方法:正文-附件-随机图片
来自:59.40.248.60
@皮皮豪:那里不会,教程说的很详细
image
2017-07-07 12:06:08 皮皮豪 评论了 emlog缩略图不同实现方法:正文-附件-随机图片
来自:120.82.74.53
看了还是不会啊
image
2017-07-07 18:23:25 皮皮豪 评论了 今天画了一个小图标
来自:120.82.74.36
怎么联系你啊
image
2017-07-07 12:07:49 追梦小窝 评论了 今天画了一个小图标
来自:113.91.34.248
@文森:别笑话我了
image
2017-04-04 22:29:04 文森 评论了 今天画了一个小图标
来自:223.74.150.13
这个图标看上去很nice
站点统计
  • 文章总数: 141篇
  • 微语总数: 6条
  • 评论总数: 6条
  • 运行天数: 1591天