Java学习者论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

手机号码,快捷登录

恭喜Java学习者论坛(https://www.javaxxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,购买链接:点击进入购买VIP会员
JAVA高级面试进阶视频教程Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程

Go语言视频零基础入门到精通

Java架构师3期(课件+源码)

Java开发全终端实战租房项目视频教程

SpringBoot2.X入门到高级使用教程

大数据培训第六期全套视频教程

深度学习(CNN RNN GAN)算法原理

Java亿级流量电商系统视频教程

互联网架构师视频教程

年薪50万Spark2.0从入门到精通

年薪50万!人工智能学习路线教程

年薪50万!大数据从入门到精通学习路线年薪50万!机器学习入门到精通视频教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程 MySQL入门到精通教程
查看: 892|回复: 0

[默认分类] vue开发环境和生产环境里面解决跨域的几种方法

[复制链接]
  • TA的每日心情
    开心
    2021-12-13 21:45
  • 签到天数: 15 天

    [LV.4]偶尔看看III

    发表于 2020-8-17 16:07:25 | 显示全部楼层 |阅读模式
    什么是跨域
      跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议,端口,域名。只要这个3个中有一个不同就是跨域。 这里列举一个经典的列子:
    1. [code]#协议跨域
    2. http://a.baidu.com访问https://a.baidu.com;
    3. #端口跨域
    4. http://a.baidu.com:8080访问http://a.baidu.com:80;
    5. #域名跨域
    6. http://a.baidu.com访问http://b.baidu.com;
    复制代码
    [/code]
      现在很多公司都是采用前后分离的方式开发。那么出现经常和会跨域打交道。我这里整理日常开发中解决跨域的几种方案。我们前端使用的vue,后端使用的NodeJs。
    解决方案
    proxyTable
      这里vue脚手架生成的标准项目为准。一般在项目config目录下面有个index文件。里面格式如下:
    1. [code]"use strict"
    2. const path = require("path")
    3. module.exports = {
    4.     dev: {
    5.         // Paths
    6.         assetsSubDirectory: "static",
    7.         assetsPublicPath: "/",
    8.         proxyTable: {
    9.             "/api": {
    10.                 target: "http://localhost:7001",//后端接口地址
    11.                 changeOrigin: true,//是否允许跨越
    12.                 pathRewrite: {
    13.                     "^/api": "/api",//重写,
    14.                 }
    15.             }
    16.         },
    17.         host: "192.168.0.104",
    18.         port: 8081,
    19.         autoOpenBrowser: false,
    20.         errorOverlay: true,
    21.         notifyOnErrors: true,
    22.         poll: false,
    23.         useEslint: true,
    24.         showEslintErrorsInOverlay: false,
    25.         devtool: "eval-source-map",
    26.         cacheBusting: true,
    27.         cssSourceMap: false,
    28.     },
    29. }
    复制代码
    [/code]
      上面配置中,我们根据实际情况只需要修改proxyTable对于配置即可。假设我后端请求地址是http://localhost:7001,所有api的接口url都以/api开头。所以首先需要匹配所有以/api开头的.然后修改target的地址为http://localhost:7001。最后修改pathRewrite地址。将前缀 "^api" 转为 "/api"。如果本身的接口地址就有 "/api" 这种通用前缀,就可以把 pathRewrite 删掉。注意这个方式只能在开发环境中使用。
    CORS
      CORS即跨源资源共享,它定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。它是一个妥协,有更大的灵活性,但比起简单地允许所有这些的要求来说更加安全。但是CORS也具有一定的风险性,比如请求中只能说明来自于一个特定的域但不能验证是否可信,而且也容易被第三方入侵。 这里一般需要后端配合,开启cors。一般各种语言都有类似的包。比如NodeJS的Koa2-cors
      
    1. [code]var koa = require("koa");
    2. //npm install --save koa2-cors
    3. var cors = require("koa2-cors");
    4. var app = koa();
    5. //开启
    6. app.use(cors());
    复制代码
    [/code]
    这个方式解决的跨越问题支持开发和生产环境。但是有一定的安全性问题。
    nginx
      当我们明白跨越的含义之后。只要解决了"源"的问题。那么跨越也就不存在了。这里我们便会想到proxy,同时也会想到Nginx。

    我们只需要在部署静态资源配置下面加上红框里面的配置就可以了。同时这个方法支持开发环境和生产环境。
    后端程序代理
      当然上面2个方法都需要后端的配合和需要修改服务器配置。所有还有一种方法不需要他们配合 ,我们自己就可以做到。就是我们自己启一个后端程序做代理。然后把所有的请求转发到服务器。这里要用到node的一个包http-proxy-middleware。关键代码(express)如下

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

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|Java学习者论坛 ( 声明:本站资料整理自互联网,用于Java学习者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2024-3-28 23:32 , Processed in 0.374214 second(s), 48 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表