问题描述:1,前端用nginx 启动一个服务,http://localhost:8080/sxoa/#/。
2,后端用nginx 启动一个服务,http://10.64.2.59:7001/ONLINE/HttpJSONServer。
然后前端直接调后端接口,浏览器直接报 No 'Access-Control-Allow-Origin' header is present on the requested resource,看到此标志就引起了跨域问题。
解决问题: 方式1,直接使用nginx 前端服务器代理 后端服务器IP地址就Ok。
前端nginx配置如下:
server{
listen:8080;
server_name localhost;
location /sxoa{
alias D:/website/sxoa;
}
location /{#代理后端服务接口
proxy_pass http://10.64.2.59:7001
}
}
,此方法就这样解决问题了。但由于后端接口都是通用一个接口,还存在其它业务项目都用此接口,所以不能暴露,就不允许代理。就引发了第二种解决跨域的方式 CORS。
方式2:此方法是后端返回时向Response Headers 里面添加值 。 添加值有两种:直接在后端接口代码添加 headers 信息。
还有一种可以直接配置到nginx里面的.我就讲下后端nginx的配置。(我是前端同学,后端代码不会怎么搞。所以请理解下)
配置参考的https://segmentfault.com/a/1190000012550346?utm_source=tag-newest
location/ {add_headerAccess-Control-Allow-Origin *;add_headerAccess-Control-Allow-Methods'GET, POST, OPTIONS';add_headerAccess-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') {return204; }}。
上述通过header解决问题会遇到 传参复杂引起的另一问题。
复杂时,前端请求POST 会被转OPTION 方式,然后后端需要对OPTION方式进行处理。再返回以POST方式请求,然后就行了。