一. 抛出问题
今天在使用写前端代码的时候,在HBuilder中用JQuery异步请求eclipse中的项目
报出了下面的错误
问题copy下来就是:
Access to XMLHttpRequest at ‘http://localhost:6230/all/allexams?accId=1’ from origin ‘http://127.0.0.1:8848’ has been blocked by CORS : No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
翻译过来就是:
访问位于’http://localhost6230/all/exams?accId=1’源代码’http://127.0.0.1:8848’已被CORS策略阻止:请求的资源上不存在“Access Control Allow Origin”标头。
简单来说就是出现了跨域访问的问题,我这里具体是HBuilder的端口号8848和我要请求的地址端口号为6230不同,从而出现了跨域。
跨域的概念:出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)
二. 解决方案
在控制层加上@CrossOrigin这个注解就行了
还有另外一种方法,配置跨域信息,二者都可以尝试着用。
/**
* 配置跨域信息
*/
@Configuration
public class CorsConfig implements WebMvcConfigurer {
static final String ORIGINS[] = new String[] { "GET", "POST", "PUT", "DELETE" };
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**") // 所有的当前站点的请求地址,都支持跨域访问。
.allowedOrigins("*") // 所有的外部域都可跨域访问。 如果是localhost则很难配置,因为在跨域请求的时候,外部域的解析可能是localhost、127.0.0.1、主机名
.allowCredentials(true) // 是否支持跨域用户凭证
.allowedMethods(ORIGINS) // 当前站点支持的跨域请求类型是什么
.maxAge(3601); // 超时时长设置为1小时。 时间单位是秒。
}
}```