前端路线--Ajax（day03）

喝西瓜汁的兔叽Yan

已于 2022-03-23 11:53:06 修改

阅读量3.5k

点赞数

分类专栏：前端文章标签：前端

于 2022-03-23 08:02:56 首次发布

本文链接：https://blog.csdn.net/Yan9_9/article/details/123676371

版权

前端专栏收录该内容

106 篇文章 5 订阅

订阅专栏

同源策略和跨域

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p><input type="text"></p>
		<button>get请求</button>
		<div class="box"></div>
	</body>
	<script type="text/javascript">
		
			/* 
				同源策略:
				同源是指，域名，协议，端口相同
				百度和谷歌的页面，浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和同源的脚本才会被执行。
				如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。
				浏览器不允许一个服务器中的页面向另一个服务器发送请求。
				
				跨域:
				1、通过设置后台服务器允许跨域请求
				2、JSONP:利用<script>自动跨域请求
				3、使用代理服务器(nginx)
				4、前台使用代理
			 */
			
	</script>
</html>

nginx代理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		/* 
			Nginx简介:
			nginx是一个高性能的HTTP和反向代理web服务器，同时也提供了IMAP/POP3/SMTP服务。其特点是占有内存少，并发能力强，事实上nginx的并发能力在同类型的网页服务器中表现较好，中国大陆使用nginx网站用户有：百度、京东、新浪、网易、腾讯、淘宝等。
			
			Nginx专为性能优化而开发，性能是器最重要的考量，实现上非常注重效率，能经受高负载的考验，据报告能支持高达50,000个并发连接数。
			
			Nginx不仅能做反向代理，实现负载均衡；还能可以作正向代理来进行上网等功能。
			
			
			1.配置:
			去nginx官网下载nginx
			然后在ngin目录下寻找nginx.conf文件  用记事本打开
			D:\nginx\nginx-1.21.6\conf		-->		ginx.conf
			然后进行nginx代理配置,配置代码如下:
			
			server {
			    listen      8090; #访问项目的端口
			    server_name  127.0.0.1; #访问项目的域名或ip
			location / {
			    root   C:/myproject; #项目目录
			    index  index.html index.htm;    #入口文件类型
			}
			
			location /widget {
			    proxy_pass https://news.baidu.com; #转发服务器地址
			}
			}
			
			注意:/widget 改成自己的项目名-->haha
				然后在url栏里输入:localhost:8090/hah
			
			
			2.nginx操作:
			在nginx的根目录下的D:\nginx\nginx-1.21.6框内输入cmd
			然后进行命令的操作，相关命令如下:
			nginx -s stop 		快速关机
			nginx -s quit		 优雅关机
			nginx -s reload			重新加载配置
			nginx -s reopen			重启服务
			netstat -ano			查询占用端口情况
		 */
	</script>
</html>

nginx代理解决跨域问题

//放在Server里
  location /wmp/v3.1 {
            add_header 'Access-Control-Allow-Origin' $http_origin;
	        add_header 'Access-Control-Allow-Credentials' 'true';
	        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
	        add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
	        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
	    if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain; charset=utf-8';
            add_header 'Content-Length' 0;
            return 204;
        }
            proxy_pass https://apps.game.qq.com;
        }

跨域解决方案2

浏览器中查看JSON数据的插件（自动排版）

FeHelper(前端助手).crx

喝西瓜汁的兔叽Yan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端路线--Ajax（day03）

同源策略和跨域<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p><input type="text"></p> <button>get请求</button> <div class="box">
复制链接

扫一扫