如何利用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:9000
	location / {
		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;
	}
}

到此这篇关于如何利用PHP 快速解决跨域问题的文章就介绍到这了,更多相关PHP 跨域内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2022-08-24

PHP Ajax跨域问题解决方案代码实例

本文通过设置Access-Control-Allow-Origin来实现跨域. 例如:客户端的域名是client.runoob.com,而请求的域名是server.runoob.com. 如果直接使用ajax访问,会有以下错误: XMLHttpRequest cannot load http://server.runoob.com/server.php. No 'Access-Control-Allow-Origin' header is present on the requested res

PHP关于IE下的iframe跨域导致session丢失问题解决方法

今天搞的一个登录页面,被别的网站用iframe嵌进去后,死活无法登录(只在IE中存在这种情况). 很明显,session无法被保存.但是直接在地址栏打开那个登录页面,一切都正常啊.真是奇怪啊. 在网上搜索了一下.发现这个问题还真有不少人提及到.最后的解决方法是在那个登录页面里加上以下代码: 复制代码 代码如下: <span style="font-family:Microsoft YaHei; font-size:14px">header('P3P: CP="AL

header函数设置响应头解决php跨域问题实例详解

设置允许访问的域名: 1.允许全部的域名访问 header("Access-Control-Allow-Origin:*"); 2.允许指定域名访问 header( 'Access-Control-Allow-Origin:http://a.test.com' ); 设置允许访问的请求方式: 1.一种或者多种 header('Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE'); 2.全部 header('Access-Contr

ThinkPHP框架实现session跨域问题的解决方法

ThinkPHP的session跨域问题很多开发者都遇到过! 其实不管是ThinkPHP还是php本身,在解决session跨域问题的时候都需要设置session.cookie_domain. 在ThinkPHP里,需要修改配置文件conf/config.php 在第一行加上: ini_set('session.cookie_domain', ".domain.com");//跨域访问Session 经过总结,针对session跨域这一问题的解决方法主要有以下几种: 第一种情况:如果你

Vue 项目中遇到的跨域问题及解决方法(后台php)

问题描述 前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The valu

Vue开发中遇到的跨域问题及解决方法

跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,或是a页面为ip地址,b页面为域名地址,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源. 1.jsonp 原理是:动态插入script标签,通过script标签引入一个js文件,这个js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入. 由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名.协议.端口)的资源,

在vue项目中,使用axios跨域处理

跨域,一个很是让人尴尬的问题,有些人可以在后台中设置请求头,但是很多前端并不具备后台的知识,并无法自己独立的搭建一个服务器,所以就变成了一个尴尬的事情 当然,有很多的虚拟服务器,能够解决跨域问题,他们的实质都是通过后台取与后台沟通,从而委婉的解决跨域问题正好,webpack正有这种功能,所以vue-cli也是有解决跨域的能力 当然,不可能我们直接发送ajax就成功,对吧,我们肯定要修改配置文件 代码: dev: { env: require('./dev.env'), port: 8080, a

swiper在vue项目中loop循环轮播失效的解决方法

长话短说,在vue(2.5.x)中使用swiper(4.3.3),轮播加了autoplay和loop.observer.observeParents等参数还是很诡异的无法循环轮播: 那么可以这样写代码试试: this.$api.queryImages().then((resp) => { if(resp && resp.data.resultCode == "0"){ this.swiperImgs = resp.data.data; this.$nextTick

在vue项目中引入高德地图及其UI组件的方法

引入高德地图: 打开index.html,引用高德地图的JavaScript API: <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=你的API key"></script> 在"key="这里添加你申请的key,key不需要加引号. 引入高德地图UI组件,只需要在上面代码后面再加一串代码: <script

Vue项目中使用WebUploader实现文件上传的方法

简介: WebUploader是由 Baidu WebFE(FEX) 团队开发的一个简单的以 HTML5为主 , FLASH为辅 的现代 文件上传组件 .在现代的浏览器里面能充分发挥HTML5的优势,同时又 不摒弃主流IE浏览器 ,沿用原来的FLASH运行时, 兼容IE6+,iOS 6+, android 4+ .两套运行时,同样的调用方式,可供用户任意选用.采用 大文件分片并发上传 ,极大的提高了文件上传效率. 分片.并发 分片 与 并发 结合,将一个大文件分割成多块, 并发上传 ,极大地提高

vue项目中使用bpmn为节点添加颜色的方法

内容概述 bpmn是比较方便的绘制流程图的插件,官方demo https://github.com/bpmn-io/bpmn-js-examples 本文主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下. 前情提要 上文我们已经实现了在外部更改节点名.此时又有新玩法:在流程图中,根据节点状态为其标记不同颜色.例如:已完成:黄色,正在进行:绿色,本次我们通过两种方式来实现该需求.效果: 方式1:modeling.setColo

nginx 部署 vue 项目找不到js css文件的解决方法

很多时候 npm run build 之后, index.html 文件中webpack 自动插入的 js 文件 css 文件的相对目录总是不对,发布到服务器上之后,nginx 找不到文件. vue-cli@3 在 vue-cli@3 中你需要为你 webpack 插入到 index.html 中 的所有文件添加一个 baseUrl. 你需要在项目的根目录新建一个 vue.config.js, 添加如下内容: ... module.exports = { baseUrl: isProd ? '/

vue项目启动出现cannot GET /服务错误的解决方法

上午做了项目,中午吃完饭后回来再跑一次服务器, 出现 Cannot GET/: 控制台中并没有报错:npm run dev命令行窗口也没有报错. 原因 在网上查了一堆,发现这个问题还挺多呢,而且各个回答的解决方式都竟然有许多不同- 于是把能改的地方都改了-(基本上相当于将配置信息改回来) 关闭 history 模式 关闭history模式,用/#/路由的方式开启,(history模式要跑在服务端里面): 更改端口号 更改端口号(没改的话打开原端口号自动加上登陆次数) 在 webpack.base

基于vue-resource jsonp跨域问题的解决方法

最近在学习vue.js 碰到个ajax跨域请求的问题,之前知道可以用jsonp解决,但是一直没实践过,这次用发现里面好多问题,所以现在记录下来,希望可以给刚接触使用jsonp的同学一点帮助! 关于什么是jsonp,以及为什么要用jsonp我就不多说了,不明白的同学自行百度一下. 我们先来说一下jQuery里面的jsonp请求,这搞懂了 vue-resource 里面的jsonp就容易明白了. 这里我以json数据为例,首先我们通过 $.get可以直接得到一个我们想要的对象,但是用 jsonp 就