前后端分离的项目，解决跨域问题（前后端分离如何解决跨域）

1.nginx配置处理，优点是代码无入侵

1>客户端配置

server

{

listen 3003;

server_name localhost;

## = /表示精确匹配路径为/的url，真实访问为http://localhost:5500

location = / {

proxy_pass http://localhost:5500;

}

## /no 表示以/no开头的url，包括/no1,no/son，或者no/son/grandson

## 真实访问为http://localhost:5500/no开头的url

## 若 proxy_pass最后为/ 如http://localhost:3000/;匹配/no/son，则真实匹配为http://localhost:3000/son

location /no {

proxy_pass http://localhost:3000;

}

## /ok/表示精确匹配以ok开头的url，/ok2是匹配不到的，/ok/son则可以

location /ok/ {

proxy_pass http://localhost:3000;

}

}

修改前端访问路径为localhost:3003

2>.服务端配置

server

{

listen 3002;

server_name localhost;

location /ok {

proxy_pass http://localhost:3000;

# 指定允许跨域的方法，*代表所有

add_header Access-Control-Allow-Methods *;

# 预检命令的缓存，如果不缓存每次会发送两次请求

add_header Access-Control-Max-Age 3600;

# 带cookie请求需要加上这个字段，并设置为true

add_header Access-Control-Allow-Credentials true;

# 表示允许这个域跨域调用（客户端发送请求的域名和端口）

# $http_origin动态获取请求客户端请求的域 不用*的原因是带cookie的请求不支持*号

add_header Access-Control-Allow-Origin $http_origin;

# 表示请求头的字段 动态获取

add_header Access-Control-Allow-Headers

$http_access_control_request_headers;

# OPTIONS预检命令，预检命令通过时才发送请求

# 检查请求的类型是不是预检命令

if ($request_method = OPTIONS){

return 200;

}

}

}

2.JSONP的方式

因为script标签是不受浏览器同源策略的影响，允许跨域请求资源（我们的每一个页面都引用了大量第三方js文件）。所以可以利用动态创建script标签，通过src属性发起跨域请求，这就是jsonp的原理。但是jsonp只支持GET请求，所以并不是一种好的方式。

3.服务器端过滤器方式

@Override

public void addCorsMappings(CorsRegistry registry){

registry.addMapping("/**")

.allowedOrigins("*")

.allowCredentials(true)

.allowedMethod("GET","POST","DELETE","PUT")

.maxAge(3600 * 24)

}