头疼的跨域问题到底应该怎么处理?(汇总)

 

本文主要解决linux服务器下的配置;windows基本上修改http头就能好.其他环境可以作为参考,肯定有益

跨域的表现

我贴一段文字的提示,这样搜索引擎就能抓取到,然后就会吸引你进来了.如果你就是这样被吸引的 ,请点赞,然后继续往下看:

No 'Access-Control-Allow-Origin' header is present on the requested resource

 XMLHttpRequest cannot load * The 'Access-Control-Allow-Origin' header has a value * that is not equal to the supplied origin. Origin * is therefore notallowed access.

Access to XMLHttpRequest at '*' from origin '*' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

常见的解决方案

遇到跨域问题

1 你可能会这样(修改后端代码)(这样后端程序员要被逼成啥样才能写出来这样的!!)

//.net
   //解决跨域
   app.UseHttpsRedirection().UseCors(builder => builder.AllowAnyMethod());
   app.UseHttpsRedirection().UseCors(builder => builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
//java
    response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com"); 
    response.setHeader("Access-Control-Allow-Credentials", "true"); 
    response.setHeader("Access-Control-Allow-Headers", "Content-Type,X-Requested-With");
//Nodejs后台 
    res.writeHead(200, {
            'Access-Control-Allow-Credentials': 'true',    
            'Access-Control-Allow-Origin': 'http://www.domain.com',  
    });
    res.write(JSON.stringify(postData));
    res.end();
//php
    header('Access-Control-Allow-Origin:*');//允许所有来源访问
    header('Access-Control-Allow-Method:POST,GET');//允许访问的方式
//jquery
    jQuery.support.cors = true;
    或
    processData: false
//vue-cli   
    app.all('*', function (req, res, next) {
      res.header("Access-Control-Allow-Origin", "*");
      res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length,     Authorization, Accept, X-Requested-With , yourHeaderFeild');
      res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
      res.header("X-Powered-By", ' 3.2.1')
      res.header("Content-Type", "application/json;charset=utf-8");
      next();
    });
//python
    #设置可跨域范围
    CORS_ALLOW_CREDENTIALS = True
    CORS_ORIGIN_ALLOW_ALL = True
    #定义跨域中间件
    'corsheaders.middleware.CorsMiddleware',

2 也可能会这样(修改http响应标头)(代表微软感谢你还在支持C#或者asp)

3 还可能是这样(iframe)(前端宝宝辛苦了)

<iframe id="iframe" src="http://aaa.domain.com/aaa.html"></iframe>
<script>
    document.domain = 'domain.com';
    var user = 'admin';
</script>

4 还有这样的吧(设置图片的和xhr的)(这样也只能解决图片,其他数据请求解决不了找后端吧)

var gl = ...;
var image = new Image();
image.onload = ...;
image.crossOrigin = "anonymous";
image.src = "http://other-domain.com/image.jpg";

5 还有配置前端框架的(vue等)(这个框架一直想学,听说很香)

a.) axios设置：

axios.defaults.withCredentials = true

b.) vue-resource设置：

Vue.http.options.credentials = true

6 还有设置后端服务的(Nginx)(运维同学,熬夜伤不起)

location / {  
    add_header Access-Control-Allow-Origin *;
} 

7 还有socketio的(socket)(这种用的都是资深的程序员了)

<div>user input：<input type="text"></div>
<script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
<script>
var socket = io('http://www.domain2.com:8080');

// 连接成功处理
socket.on('connect', function() {
    // 监听服务端消息
    socket.on('message', function(msg) {
        console.log('data from server: ---> ' + msg); 
    });

    // 监听服务端关闭
    socket.on('disconnect', function() { 
        console.log('Server socket has closed.'); 
    });
});

document.getElementsByTagName('input')[0].onblur = function() {
    socket.send(this.value);
};
</script>

8 增加请求(mate)(IE可能好了.但是你别高兴的早,你敢试试别的吗?哭)

<meta http-equiv="Access-Control-Allow-Origin" content="*" />

其他 还在搜集整理中.......(欢迎留言)

那么问题来了

尝试了很多,到底怎么解决呢?

解决之前,首页我们先了解一下为什么会跨域.我找别人的代码粘贴过来吧

那些情况会跨域

既然你都看到这里了. 下面黑框里面的你肯定能找到和你雷同的.(如有雷同,不胜荣幸)

URL                                      说明                    是否允许通信
http://www.domain.com/a.js
http://www.domain.com/b.js         同一域名，不同文件或路径           允许
http://www.domain.com/lab/c.js

http://www.domain.com:8000/a.js
http://www.domain.com/b.js         同一域名，不同端口                不允许
 
http://www.domain.com/a.js
https://www.domain.com/b.js        同一域名，不同协议                不允许
 
http://www.domain.com/a.js
http://192.168.4.12/b.js           域名和域名对应相同ip              不允许
 
http://www.domain.com/a.js
http://x.domain.com/b.js           主域相同，子域不同                不允许
http://domain.com/c.js
 
http://www.domain1.com/a.js
http://www.domain2.com/b.js        不同域名                         不允许

下面不乱扯了, 加班回家了

跨域 http返回状态都不对. 这个一定要打开F12查一下请求的返回值

常见状态

一般是405.请求的Request Method:OPTIONS . 

划重点了~~~~~~~

跨域资源共享(CORS)标准:浏览器必须首先使用 OPTIONS 方法发起一个预检请求,返回204后，才发起实际的 HTTP 请求

错误的:

正确的:

跨域的话Post那条是看不到的

所有要攻克的话要让服务器对OPTIONS 返回204

所以

if ($request_method = 'OPTIONS') {
        return 204;
}

具体代码如下

    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

    if ($request_method = 'OPTIONS') {
        return 204;
    }

这段代码加到哪里.如果不清楚.你可以留言. 因为你的服务器配置不一样, 也不好以偏概全.

当然,我开头写的很多情况, 并不是解决不了问题. 只要知道原理,再去实现才行.

官方资料:

HTTP访问控制（CORS） https://developer.mozilla.org/en-US/docs/Glossary/CORS

XMLHttpRequest原理 : https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest

跨域资源共享 CORS 详解 : http://www.ruanyifeng.com/blog/2016/04/cors.html