1 跨域的原因,浏览器的同源策略导致,需要接口响应通过设置 Access-Control-Allow-Origin 响应头,浏览器可以知道哪些网站可以访问这个网站的数据,知道这个原理之后就有多种方式可以实现,比如通过nginx 设置该响应头或者应用中通过过滤器设置.
有个特别点,如果只是设置简单跨越,可能部分请求还是会不支持,比如
请求头设置的contentType 为application\json, 这种请求方式浏览器会先发送一个option请求,所以要设置允许option
nginx 跨越设置,$cors_header 为前端页面跨域的域名地址
server {
# 其它配置
location /api {
add_header 'Access-Control-Allow-Origin' "$cors_header" always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'Authorization, X-Requested-With, Content-Type, Accept' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
if ($request_method = 'OPTIONS') {
return 204;
}
proxy_pass http://localhost:3000;
}