vue解决跨域的几种办法_前端跨域解决方案

vue解决跨域的几种办法_前端跨域解决方案什么是跨域  跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议,端口,域名。只要这个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;  现在很多公司都是采用前后分离的方式开发。那么出

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

什么是跨域

  跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议,端口,域名。只要这个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。

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

后端程序代理

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

  

用Vue-cli脚手架搭建了个demo,前后分离就有跨域问题的出现。

vue-clie搭建demo步骤(传送门):https://www.cnblogs.com/wangenbo/p/8487764.html

我自己在网上找了2个接口做测试:

CSDN:https://www.csdn.net/api/articles?type=more&category=home&shown_offset=1524276761019196&first_view=false

掘金:https://suggest-follow-api-ms.juejin.im/v1/getByTag?tag=%E5%89%8D%E7%AB%AF&src=web&t=1

安装模块axios进行ajax请求,直接请求,肯定显示跨域,无法请求。

 ===============    以下为npm run dev 跨域的解决方法    ===============

vue解决跨域的几种办法_前端跨域解决方案

脚手架Vue-cli已经帮我们留好了接口

参考这篇文章才知道:https://blog.csdn.net/qq_31201781/article/details/78778193

在config目录下的index.js文件,有个参数:

proxyTable:{}

所以,我把参数添加成:

vue解决跨域的几种办法_前端跨域解决方案

原来接口:

CSDN:https://www.csdn.net/api/articles?type=more&category=home&shown_offset=1524276761019196&first_view=false

掘金:https://suggest-follow-api-ms.juejin.im/v1/getByTag?tag=%E5%89%8D%E7%AB%AF&src=web&t=1

请求链接就变成这样了:

vue解决跨域的几种办法_前端跨域解决方案

vue解决跨域的几种办法_前端跨域解决方案

最后,把数据打印出来,就可以了。。

vue解决跨域的几种办法_前端跨域解决方案

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/187264.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • linux非root用户启动nginx,Linux 普通用户启动nginx

    linux非root用户启动nginx,Linux 普通用户启动nginx现象nginx配置的user为www用户,root启动之后主进程显示root,子进程显示是www,但是切换到www用户之后执行nginx-t等报错services@pts/0$/usr/local/nginx/sbin/nginx-tnginx:[warn]the”user”directivemakessenseonlyifthemasterprocess…

  • bzero 函数_readdir函数

    bzero 函数_readdir函数文章属属于转载:转载地址不详bzero  原型:    externvoid bzero(void*s,intn);头文件:    #include功能:置字节字符串s的前n个字节为零。    说明:bzero无返回值。

    2022年10月11日
  • 面试官问:如何防超卖,有几种实现方式

    面试官问:如何防超卖,有几种实现方式

  • php Calender(日历)代码

    代码如下:1=2038)23{24$year=date('Y');25}26}else27{28if($year12)36{37$

    2021年12月20日
  • Quartz定时任务[通俗易懂]

    一、Quartz的核心概念1.任务jobjob就是想要实现的任务类,每一个job必须实现job接口,且实现接口中的excute()方法。2.触发器TriggerTrigger为你执行任务的触发器,可以设置特定时间执行该任务Trigger主要包含SimpleTrigger和CronTrigger两种3.调度器SchedulerScheduler为任务的调度器,它会将任务job及触发器…

  • dirsearch讲解_中国指南网

    dirsearch讲解_中国指南网获取更多学习资料、想加入社群、深入学习,请扫我的二维码或加Memory20000427。在本文中,我们将学习如何使用Dirsearch。说起国内的御剑套装,相信各位都已经非常熟悉了。但御剑已经好多年不更新了,而且需要windows,有时候线程设置大了点,扫了半天中途还可能卡住不动了,也没有实时的数据保存,前功尽弃。总之各种不爽。现在好用的webscanner也层出不穷,我根据自己的需求和实际使用体验,最终选择了dirsearch这款工具。基本情况它是一个命令行工具,旨在暴力激活成功教程网站中的目录和

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号