PHP 快速解决跨域问题

跨域介绍

浏览器拥有同源策略限制确保安全，同源策略会阻止一个域的Javascript脚本和另外一个域的内容进行交互。

当一个请求url的协议、域名（包括多级域名）、端口三者之间任意一个与当前页面url不同即为跨域。

跨域限制

1）无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB

2）无法接触非同源网页的 DOM 节点

3）无法向非同源地址发送 AJAX 请求

跨域解决方案

1）JSONP（只支持GET请求）

Javascript：

<script src="http://test.com/data.php?callback=dosomething"></script>
// 向服务器test.com发出请求，该请求的查询字符串有一个callback参数，用来指定回调函数的名字// 处理服务器返回回调函数的数据
<script type="text/javascript">function dosomething(res){// 处理获得的数据console.log(res.data)}
</script>

data.php：

header('Content-type: application/json');//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['callback']);//json数据
$json_data = '["customername1","customername2"]';//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";

2）CORS 跨域资源分享（Cross-Origin Resource Sharing）

1、普通跨域请求：只需服务器端设置 Access-Control-Allow-Origin

2、带cookie跨域请求：前后端都需要进行设置

PHP：

header("Access-Control-Allow-Origin:*");

或者 Nginx：

location ~ .*\.php$
{add_header 'Access-Control-Allow-Origin' '*';    # 就加这句就行include fcgi.conf;fastcgi_pass  127.0.0.1:10080;fastcgi_index index.php;expires off;
}

Javascript：

$.ajax({url: 'http://www.test.com:8080/login',type: 'get',data: {},xhrFields: {withCredentials: true    // 前端设置是否带cookie},crossDomain: true,           // 会让请求头中包含跨域的额外信息，但不会含cookie
});

3）WebSocket 浏览器与服务器的全双工通信，同时也是跨域的一种解决方案

4）Nginx 反向代理

server {# nginx监听所有 test.com:9000 端口收到的请求listen       9000;server_name  test.com;# test.com:9000 会被转发到 192.168.25.20:9000location / {proxy_pass http://192.168.25.20:9000;}# test.com:9000/api/ 会被转发到 "192.168.25.20:9000/api/"location /api/ {proxy_pass http://192.168.25.20:9000;}
}

摘自：什么是跨域？跨域解决方法_越努力，越幸运！-CSDN博客_跨域

PHP 快速解决跨域问题相关推荐

使用 Nginx 部署前后端分离项目，解决跨域问题
前后端分离这个问题其实松哥和大家聊过很多了,上周松哥把自己的两个开源项目部署在服务器上以帮助大家可以快速在线预览(喜大普奔,两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了 ...
使用express封装一个简单的http代理服务器以及手动设置Access-Control-Allow-Origin解决跨域问题
一.跨域是什么? 先来了解一下什么是跨域,才能知道如何解决跨域问题. 跨域:出于浏览器的同源策略限制,使浏览器不能执行其他网站的脚本.同源策略是浏览器对 javascript 施加的安全限制. 所谓同 ...
微服务电商实战(十一)搭建vue项目对接注册登陆接口，解决跨域问题，使用七牛云实现头像上传
一.简介 node.js版本:v12.16.3 node.js下载 vue官网教程 iview介绍上传头像接口,图片存储在七牛云中,注册并实名认证之后可以免费使用以下会描述使用vue搭建项目框架的 ...
无需CORS，用nginx解决跨域问题，轻松实现低代码开发的前后端分离
近年来,前后端分离已经成为中大型软件项目开发的最佳实践. 在技术层面,前后端分离指在同一个Web系统中,前端服务器和后端服务器采用不同的技术栈,利用标准的WebAPI完成协同工作.这种前后端分离的&q ...
Express解决跨域问题
跨域:指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制. 例如:a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,所进 ...
前端百题斩【027】——解决跨域的常用利器CORS全解
写该系列文章的初衷是"让每位前端工程师掌握高频知识点,为工作助力".这是前端百题斩的第27斩,希望朋友们关注公众号"执鸢者",用知识武装自己的头脑. 27.1 ...
继承WebMvcConfigurer 和 WebMvcConfigurerAdapter类依然CORS报错? springboot 两种方式稳定解决跨域问题
继承WebMvcConfigurer 和 WebMvcConfigurerAdapter类依然CORS报错???springboot 两种方式稳定解决跨域问题! 之前我写了一篇文章,来解决CORS报错 ...
CORS-跨域资源共享解决跨域问题
1.什么是跨域? a.test.com 和 b.test.com 是两个不同的域,而处于安全机制考虑,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容,但是我们在项目开发时,经常遇到一个页 ...
前端解决跨域问题的8种方案（最新最全）
.同源策略如下: URL 说明是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下允许 http://www.a.com/lab/a.j ...
React Axios 请求解决跨域问题
网上看了很多的方案,但是不知道为什么,作为初学者,对react不太清楚的话,解决跨域还是有很多的问题.这篇博客针对小白,第一次调试react 跨域问题,甚至第一次使用Axios ,第一次... 废话就 ...

PHP 快速解决跨域问题

PHP 快速解决跨域问题相关推荐

最新文章

热门文章