vue前端怎么解决跨域问题_前端跨域调用js方法解决方案

vue前端怎么解决跨域问题_前端跨域调用js方法解决方案跨域问题是什么?怎样解决?vue前端配置代理服务器,SpringBoot提供跨域的解决方法

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

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

1.什么是跨域?

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。
在这里插入图片描述

2.什么是同源策略

同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说

Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。

同源策略又分为以下两种:

  • DOM同源策略:禁止对不同源页面DOM 进行操作。这里主要场景是iframe跨域的情况,不同域名的iframe是限制互相访问的。
  • XMLHttpRequest同源策略:禁止使用XHR对象向不同源的服务器地址发起HTTP请求。么去解决跨域?

2.解决跨域的三种方法

1. JSONP

JSONP 包含两部分: 回调函数和数据。

回调函数是当响应到来时要放在当前页面被调用的函数

数据就是传入回调函数中的json数据,也就是回调函数的参数了

原理: 是用script标签的src属性向后台发起接口请求,把返回来的值作为一个js处理

应用场景:只能适用于get请求接口方式,因为get请求方式把参数值拼接到url地址头上

优点: 前端不需要做过多处理,在后端解决跨域问题 ;它可以兼容低版本的浏览器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP 实例</title>
</head>
<body>
<div id="divCustomers"></div>
<script type="text/javascript">
function callbackFunction(result, methodName)
{
    var html = '<ul>';
    for(var i = 0; i < result.length; i++)
    {
        html += '<li>' + result[i] + '</li>';
    }
    html += '</ul>';
    document.getElementById('divCustomers').innerHTML = html;
}
</script>
<script type="text/javascript" src="https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>
</body>
</html>

上述实现原理:

(1) 利用script标签,规避跨域

(2) 在客户端声明一个函数,function jsonCallBack(){}

(3) 在服务端根据客户端传来的信息,返回一个字符串

(4) 客户端,利用<script>标签解析为可运行的JavaScript代码,调用 jsonCallback() 函数。

2.代理服务器(以Vue为例)

webpack 给我们提供了这个功能 官网:https://webpack.docschina.org/concepts/

vue前端怎么解决跨域问题_前端跨域调用js方法解决方案

在前端服务和后端接口服务之间 架设一个中间代理服务,它的地址保持和前端服务一致,那么:

  1. 中间服务和前端服务之间由于协议域名端口三者统一不存在跨域问题,可以直接发送请求
  2. 中间服务和后端服务之间由于并不经过浏览器没有同源策略的限制,可以直接发送请求

这样,我们就可以通过中间这台服务器做接口转发,在开发环境下解决跨域问题,看起来好像挺复杂,其实vue-cli已经为我们内置了该技术,我们只需要按照要求

配置一下即可。

vue.config.js 文件中配置:

module.exports = { 
   
  productionSourceMap:false,
  // 关闭ESLINT校验工具
  lintOnSave: false,
  //配置代理跨域
  devServer: { 
   
    proxy: { 
   
      "/api": { 
   
        target: "http:localhost:8088",
        pathRewrite: { 
   '^/api':''} //如果后端的API都是以 api 开头,则不需要此行
      },
    },
  },
};

3.后端服务器设置跨域(以springBoot为例)

@Configuration
public class CorsConfig { 
   

    // 当前跨域请求最大有效时长。这里默认1天
    private static final long MAX_AGE = 24 * 60 * 60;

    @Bean
    public CorsFilter corsFilter() { 
   
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
        corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
        corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
        corsConfiguration.setMaxAge(MAX_AGE);
        source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
        return new CorsFilter(source);
    }
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

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

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

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

(0)
blank

相关推荐

  • 卷积及理解图像卷积操作的意义

    卷积及理解图像卷积操作的意义转载:http://blog.csdn.net/chaipp0607/article/details/72236892     https://www.zhihu.com/question/22298352   在图像处理领域,我们经常能听到滤波,卷积之类的词,其实他们都可以看做一种图像的卷积操作,相对应的卷积核,卷积模板,滤波器,滤波模板,扫描窗其实也都是同一个东西。下面我们进一步讨论…

  • Apache配置+php配置

    Apache配置+php配置一、apache配置首先下载apache安装包,下载地址:http://httpd.apache.org/download.cgi我的是win7系统,所以下载windows的安装包,点击我圈出的地方然后点击ApacheHaus根据自己的电脑选择64位还是32的安装包,进行下载然后解压文件,我解压到E:\Apache\Apache24然后打开文件夹找到conf文件夹…

  • CSS3 opacity 属性介绍

    CSS3 opacity 属性介绍CSS3opacity属性定义和用法opacity属性设置元素的不透明级别。默认值: 1 继承性: no 版本: CSS3 JavaScript语法: object.style.opacity=0.5 语法opacity:value|inherit;值 描述 value 规定不透明度。从0.0(完全透明)到…

  • 浅析人脸检测之Haar分类器方法:Haar特征、积分图、 AdaBoost 、级联

    浅析人脸检测之Haar分类器方法:Haar特征、积分图、 AdaBoost 、级联浅析人脸检测之Haar分类器方法一、Haar分类器的前世今生      人脸检测属于计算机视觉的范畴,早期人们的主要研究方向是人脸识别,即根据人脸来识别人物的身份,后来在复杂背景下的人脸检测需求越来越大,人脸检测也逐渐作为一个单独的研究方向发展起来。      目前的人脸检测方法主要有两大类:基于知识和基于统计。Ø 基于知识的方法:主要利用先验知识将人脸看作器官特征的组合,根

  • JSTAT分析_jstat命令详解

    JSTAT分析_jstat命令详解S0S1EOMCCSYGCYGCTFGCFGCTGCT21.220.0040.5976.4381.2580.972212513.28633.413516.69921.220.0040.5976.4381.2580.9

  • ER图是什么?「建议收藏」

    ER图是什么?「建议收藏」ER图分为实体、属性、关系三个核心部分。实体是长方形体现,而属性则是椭圆形,关系为菱形。ER图的实体(entity)即数据模型中的数据对象,例如人、学生、音乐都可以作为一个数据对象,用长方体来表示,每个实体都有自己的实体成员(entitymember)或者说实体对象(entityinstance),例如学生实体里包括张三、李四等,实体成员(entitymember)/实体实例(entityinstance)不需要出现在ER图中。ER图的属性(attribute)即数据对象所具有的属

发表回复

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

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