js中的几种跨域方法及原理

一、什么是跨域？

js跨域是指js在不同的域之间进行数据传输或通信。因为协议、主机名、端口号不同，故需要跨域。

二、jsonp跨域（也叫src跨域）

<script>
        function dosome(data) {
            console.log(data);      //获得data数据
        }
    </script>
    <script src="http://localhost:8080/ajax/php/dosomething.php?cb=dosome"></script>  <!--?cb=dosome-->


<?php
$callback=$_GET["cb"];
$data=arry(a,b,c);
echo $callback.'('.json_encode($data).')';
?>

三、cors跨域

cors跨域是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

有类似以下错误，需考虑跨域解决。

No 'Access-Control-Allow-Origin' header is present on the requested resource,
并且
The response had HTTP status code 404

PHP后台配置

第一步：配置PHP后台允许跨域。

<?php header('Access-Control-Allow-Origin: *');

header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');

第二步：配置Apache web服务器跨域(httpd.conf中)

原始代码：
<Directory />
    AllowOverride none
    Require all denied
</Directory>
修改代码：
<Directory />
    Options FollowSymLinks
    AllowOverride none
    Order deny,allow
    Allow from all
</Directory>

JAVA后台配置

第一步：获取依赖jar包下载 cors-filter-1.7.jar, java-property-utils-1.9.jar 这两个库文件放到lib目录下。(放到对应项目的webcontent/WEB-INF/lib/下)。

第二步：如果项目用了Maven构建的,请添加如下依赖到pom.xml中:

<dependency>
    <groupId>com.thetransactioncompany</groupId>
    <artifactId>cors-filter</artifactId>
    <version>[ version ]</version>
</dependency>

NET后台配置

第一步：网站配置。打开控制面板，选择管理工具,选择iis;右键单击自己的网站，选择浏览;打开网站所在目录,用记事本打开web.config文件添加下述配置信息,重启网站

"Access-Control-Allow-Headers":"X-Requested-With,Content-Type,Accept,Origin"

四、vue反向代理