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

 

什么是跨域访问

在A网站中，我们希望使用Ajax来获得B网站中的特定内容。如果A网站与B网站不在同一个域中，那么就出现了跨域访问问题。你可以理解为两个域名之间不能跨过域名来发送请求或者请求数据，否则就是不安全的。跨域访问违反了同源策略，
同源策略规定，浏览器的ajax只能访问跟它的HTML页面同源（相同域名或IP）的资源。

 

跨域

                                                                                                         

 

何为同源策略

　　根据百度百科 同源策略它是由 Netscape 提出的一个安全策略，它是浏览器最核心也是最基本的安全功能，如果缺少同源策略，则浏览器的正常功能可能都会受到影响，现在所有支持JavaScript的浏览器都会使用这个策略。

　　所谓同源指的是：

协议、域名、端口号都相同，只要有一个不相同，那么都是非同源。

　　浏览器在执行脚本的时候，都会检查这个脚本属于哪个页面，即检查是否同源，只有同源的脚本才会被执行；而非同源的脚本在请求数据的时候，浏览器会报一个异常，提示拒绝访问。

　　①、http://www.123.com/index.html 调用  http://www.123.com/welcome.jsp      协议、域名、端口号都相同，同源。

　　②、https://www.123.com/index.html 调用 http://www.123.com/welcome.jsp      协议不同，非同源。

　　③、http://www.123.com:8080/index.html 调用 http://www.123.com:8081/welcome.jsp   端口不同，非同源。

　　④、http://www.123.com/index.html 调用  http://www.456.com/welcome.jsp       域名不同，非同源。

　　⑤、http://localhost:8080/index.html 调用 http://127.0.0.1:8080/welcom.jsp        虽然localhost等同于 127.0.0.1 但是也是非同源的。

同源策略限制的情况：

　　1、Cookie、LocalStorage 和 IndexDB 无法读取

　　2、DOM 和 Js对象无法获得

　　3、AJAX 请求不能发送

　　注意：对于像 img、iframe、script 等标签的 src 属性是特例，它们是可以访问非同源网站的资源的。

 

如何确定是跨域请求

• A域名资源请求到B/C……域名
• 你当前访问的域名是http的当请求的部分资源是https的
• 当使用ajax访问远程服务器时，请求失败，浏览器报如上错误。这是出于安全的考虑，默认禁止跨域访问导致的。

如果是跨域访问，这时候就会报错

has been blocked by CORS policy: No 'Access-Control-Allow-Origin'

错误场景如：

 

在开发前后端分离的项目时，常常会碰到跨域请求的问题。即由于浏览器的安全性限制，不允许 AJAX 访问协议不同、域名不同、端口号不同的数据接口，否则会出报 错误。
 

 

跨域解决方案

 

1、使用 @CrossOrigin注解

 Spring Boot 支持通过设置 CORS（跨源资源共享）来解决跨域请求问题。具体如下两个地方可以进行配置，我们选择一种即可。

 

（1）在请求方法上配置

我们可以直接在相应的请求方法上添加 @CrossOrigin 注解，那么该方法则支持跨域。

1 2 3 4 5 6 7 8 9 10 11

@RestController public class WebAPIController {     @Autowired     DeviceDataManager deviceDataManager;       @GetMapping("/getDeviceDatas")     @CrossOrigin     public List<DeviceData> importTalkTestData() {         return deviceDataManager. importTalkTestData();     } }

（2）我们也可以在控制器上添加 @CrossOrigin 注解，那么该控制器下的所有方法都支持跨域。

1 2 3 4 5 6 7 8 9 10 11

@RestController @CrossOrigin public class WebAPIController {     @Autowired     DeviceDataManager deviceDataManager;       @GetMapping("/importTalkTestData")     public List<DeviceData> importTalkTestData() {         return deviceDataManager. importTalkTestData ();     } }

（3）@CrossOrigin 注解还支持更加丰富的参数配置：

value：表示支持的域。这里表示来自 http://localhost:8081 域的请求是支持跨域的。默认为 *，表示所有域都可以。

maxAge：表示探测请求的有效期（先进性判断是否有效）。探测请求不用每次都发送，可以配置一个有效期，有效期过了之后才会发送探测请求。默认为 1800 秒，即 30 分钟。

allowedHeaders：表示允许的请求头。默认为 *，表示该域中的所有的请求都被允许。

1 2 3 4 5 6 7 8

@RestController public class WebAPIController {     @Autowired     DeviceDataManager deviceDataManager;       @GetMapping("/getDeviceDatas")     @CrossOrigin(value = "http://localhost:8081", maxAge = 1800, allowedHeaders ="*")     public List<DeviceData> getDeviceDatas() {         return deviceDataManager.getDatas();     } }

2、response 添加 header

　　我们在 Servlet 请求返回时添加如下代码：

1 //*表示支持所有网站访问，也可以额外配置相应网站

2 resp.setHeader("Access-Control-Allow-Origin", "*");

例：

@RequestMapping(value ="/importTalkTestData")
@ResponseBody
public GenericResponse importTalkTestData( HttpServletRequest request,EasyTalkTestRequestVo easyTalkTestRequestVo,HttpServletResponse  response)  throws Exception {

  
    response.setHeader("Access-Control-Allow-Origin", "*");

 

}

 

但是不知道为何我尝试这种方法并没有成功o(╥﹏╥)o

 

3、修改nginx配置文件

原理图：

利用nginx反向代理，将请求分发到部署到相应项目的tomcat服务器，当然也不存在跨域问题。

Nginx.conf修改：

 

server {

          

           listen       8105;

           server_name  manage2;

   

           #charset koi8-r;

   

           #access_log  logs/host.access.log  main;

   

           location / {

              root   /opt/admin2;

              index  index.html index.htm;

              try_files $uri $uri/ /index.html;

           }

           location /easyTalkTest {

           proxy_pass http://test.admin.langooo.com/easyTalkTest;

               proxy_set_header X-Real-IP $remote_addr;

               proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

               proxy_set_header Host $host;

               proxy_set_header X-NginX-Proxy true;

               proxy_set_header CAPTCHA_TOKEN $http_captcha_token;

              proxy_set_header Authorization $http_authorization;

               proxy_connect_timeout 300;

               proxy_send_timeout 300;

               proxy_read_timeout 300s;

           }

 

           ##error_page  404              /404.html;

   

           # redirect server error pages to the static page /50x.html

           #

           error_page   500 502 503 504  /50x.html;

           location = /50x.html {

              root   html;

           }

            

       }

Ps:我是使用第三种方法解决的问题。