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

秒速五厘米 2023-02-10 07:39 100阅读 0赞

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

# 跨域的表现 #

![20200520174634866.png][]

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

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) ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXRpZXR1bw_size_16_color_FFFFFF_t_70][]

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

## 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可能好了.但是你别高兴的早,你敢试试别的吗?哭) ##

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

那么问题来了

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

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

# 那些情况会跨域 #

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

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 请求**

## 错误的: ##

![20200520182531226.png][]

![20200520182550728.png][]

## 正确的: ##

![20200520182307343.png][]

![20200520182407958.png][]![20200520182425242.png][]

跨域的话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][https_developer.mozilla.org_en-US_docs_Glossary_CORS]

XMLHttpRequest原理 : [https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest][https_developer.mozilla.org_zh-CN_docs_Web_API_XMLHttpRequest]

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

[20200520174634866.png]: https://img-blog.csdnimg.cn/20200520174634866.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXRpZXR1bw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200520172007939.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXRpZXR1bw==,size_16,color_FFFFFF,t_70
[20200520182531226.png]: https://img-blog.csdnimg.cn/20200520182531226.png
[20200520182550728.png]: https://img-blog.csdnimg.cn/20200520182550728.png
[20200520182307343.png]: https://img-blog.csdnimg.cn/20200520182307343.png
[20200520182407958.png]: https://img-blog.csdnimg.cn/20200520182407958.png
[20200520182425242.png]: https://img-blog.csdnimg.cn/20200520182425242.png
[https_developer.mozilla.org_en-US_docs_Glossary_CORS]: https://developer.mozilla.org/en-US/docs/Glossary/CORS
[https_developer.mozilla.org_zh-CN_docs_Web_API_XMLHttpRequest]: https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
[http_www.ruanyifeng.com_blog_2016_04_cors.html]: http://www.ruanyifeng.com/blog/2016/04/cors.html