社区首页 >专栏 >vue前端怎么解决跨域问题_前端跨域调用js方法解决方案

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

全栈程序员站长

发布于 2022-11-04 07:31:31

2.6K00

代码可运行

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：0

代码可运行

大家好，又见面了，我是你们的朋友全栈君。

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);
}
}