【面试题】跨域问题

周兴

已于 2022-11-15 10:48:14 修改

阅读量266

点赞数

分类专栏：面试题文章标签：前端 javascript

于 2022-11-07 16:43:44 首次发布

本文链接：https://blog.csdn.net/zx1041561837/article/details/127726914

版权

面试题专栏收录该内容

47 篇文章 1 订阅

订阅专栏

1. 跨域

当一个请求URL的协议、域名、端口三者之间任意一个与当前页面URL不同即为跨域。

在这里插入图片描述

同源策略：(Same origin policy/SOP)，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指“协议+域名+端口”三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

2. 跨域的解决方案

2.1 HTML特殊标签

2.2 JSONP

JSONP利用script标签运行跨域的特点，把服务器端的javaScript的代码复制过来，在本地运行。

// 前端浏览器代码
<script>
	function test(){
		alert(1);
	}
</script>
<script src="http://local.kua.com/index.php/index/kua?callback=test"></script>

// 后端php代码
public function kua(){
	$callback = $_GET["callback"];
	retrun $callback.'(123)';   // test();
}

2.3 CORS

在服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求前后端都需要设置。

// 后端php代码
header("Access-Control-Allow-Origin: *");   // *代表允许所有请求url

2.4 Proxy代理

通过中间件来实现，浏览器有跨域限制，但是服务器没有跨域限制，所以中间件其实就是服务器（服务器对数据进行了转发而已）
在这里插入图片描述
配置代理服务器 vue.config.js

module.exports = {
	devServer: {
		proxy: {
			'/': {
				target: 'http://local.kua.com',    // 设置你调用的接口域名和端口号
				changeOrigin: true,      // 跨域
			}
		}
	}
}

2.5 Ngnix反向代理

# proxy服务器
server{
	listen      80;
	server_name   www.a.com;

	location / {
		proxy_pass  http://www.baidu.com;    # 反向代理
		proxy_cookie_domain www.b.com www.a.com;
		index   index.html  index.htm;

		add_header Access-Control-Allow-Origin http://www.a.com;
		add_header Access-Control-Allow-Credentials true; 
	}
}