vue前端怎么解决跨域问题_前端跨域调用js方法解决方案
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-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);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
相关文章
- Fabric.js 使用纯色遮挡画布(前景色)
- vue中特殊的prop和事件
- Vue.js - 使用Vue实现简简单单的分页功能
- JS之在Vue对象内部获取vue对象的索引(箭头函数的闭包导致this代表的是函数本身)「建议收藏」
- Vue项目中的mock.js的使用以及基本用法和ES6的新增方法
- js字符串转html_vue文件如何编译成html
- springboot+vue练手级项目,真实的在线博客系统
- vue调用js文件_vue调用其他js文件中的方法
- 如何在vue组件中引入外部的css和js文件[通俗易懂]
- vue md编辑器_vue代码编辑器
- vue动态引入js文件的方法_vue如何引入js文件
- vue 调用子组件方法失败_Vue子组件调用父组件的方法及常见问题「建议收藏」
- vue源码分析-响应式系统工作原理_2023-03-01
- vue-cli3构建H5移动应用(vant+rem)
- Vue.js中 watch 的使用方法
- 开心档之Vue.js 组件
- 原生 JS 实现 HTML 转 Markdown ,html2md.js
- 使用JS连接MySQL数据库:实现化繁为简(js连接mysql数据库)