今天给客户提供接口的时候,客户不是通过后台去调用,而是通过网页直接表单提交,结果由于他们的网页和我的服务器不在一个域名下, 结果请求就出现啦跨域的问题,
网页报错具体如下,
于是便在网上查询后端接口允许跨域解决方案,
便查到了通过 CrossOrigin 注解,来允许后台接口进行跨域访问
@Controller
@RequestMapping("/api/promotion/")
@CrossOrigin(value = {"https://www.csdn.net","https://www.baidu.com"})
public class PromotionCustomerController extends BaseController{
//业务内容,接口均通过POST请求进行处理
}
并在网页中测试通过 ,测试方法,是通过 ,网页控制控制器模拟业务请求,测试代码如下:
var token= "111111111111111111111111111111111111";
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://127.0.0.1:8895/api/promotion/addCustomer');
xhr.setRequestHeader("x-access-token",token);
xhr.send(null);
xhr.onload = function(e) {
var xhr = e.target;
console.log(xhr.responseText);
}
这是在百度网页下,进行的测试结果
没有允许跨域访问的请求结果
允许跨域访问的请求结果
由此可见,该接口已经运行线上访问了,但是当我正式部署到线上,让前端调用的时候 依旧报错,结果如下:
经过一番排查 ,发现是请求由于不安全,直接给浏览器给直接拦下了了,若果跨域的网站是http服务由于请求不安全,就会被浏览器直接拦截, 火狐和谷歌均有这样的默认机制,但是如果进行跨域访问的网站是https则不会被拦截(如百度"https://www.baidu.com",CSDN"https://www.csdn.net"),
其相应的解决方案是, 通过修改浏览器默认配置来阻止拦截
Google浏览器设置如下:
进入谷歌浏览器,在网址栏输入下方路径访问:
chrome://flags/
接着输入下方关键词查询
Block insecure private network requests
查询后,修改为“Disabled”,并Relaunch重新启动下,点击后会自动重启浏览器。
但是此方法并没有根治问题,因为并不可能允许每个用户都修改浏览器默认配置,
经过研究最终解决方法 是 将后台的post 请求改为 GET请求 ,
这样前端便可以通过JSONP实现跨域请求,