网页接口请求跨域问题记录

        今天给客户提供接口的时候,客户不是通过后台去调用,而是通过网页直接表单提交,结果由于他们的网页和我的服务器不在一个域名下, 结果请求就出现啦跨域的问题,
网页报错具体如下,

        于是便在网上查询后端接口允许跨域解决方案,

        便查到了通过  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实现跨域请求,