为什么会产生跨域
同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源就是两个页面或者前后端的两个地址具有相同的协议(protocol),主机(host)和端口号
什么情况下会产生跨域
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同就会产生跨域
前后端项目中跨域的解决办法
方法一
-
场景:nginx+tomcat
使用nginx代理,不改动任何前后端代码。
配置demo如下
server {
listen 80;
server_name www.ccc.com;
#接口地址服务
location / {
proxy_pass http://localhost:8886/app/;
proxy_set_header Host $host:80;
proxy_read_timeout 2000;
client_max_body_size 1000m;
proxy_set_header X-Forwarded-Scheme $scheme;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Via "nginx";
}
location /index{
alias /home/dist;
expires 7d;
index index.html;
autoindex on;
}
}
- 方法二
使用JSONP,JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用,兼容性好(兼容低版本IE),缺点是只支持get请求,不支持post请求。
//ajax实现:
$.ajax({
url: 'http://www.bbb.com:8080/login’,
type: 'get',
dataType: 'jsonp', // 请求方式为jsonp
jsonpCallback: "handleCallback", // 自定义回调函数名
data: {}
});
方法三
使用CORS,主要是服务端通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置,就可以允许浏览器进行跨域的访问。
该方式只需要在写接口的时候对需要开放跨域的接口进行配置,前端不需要进行配置就可以直接调用,使用方便,限制小,部署时也不需要担心是否同源问题,不局限于GET调用方式。
1、在spring mvc中可使用XML配置方式,demo如下,更多配置细节可自行百度:
<mvc:cors>
<mvc:mapping path="/**"
allowed-origins="*"
allowed-methods="POST, GET, OPTIONS, DELETE, PUT"
allowed-headers="Content-Type, Access-Control-Allow-Headers,Access-Control-Allow-Methods,Access-Control-Allow-Origin
,Authorization, X-Requested-With"
exposed-headers="header1, header2"
allow-credentials="true" />
</mvc:cors>
2、spring boot中配置demo如下,更多配置细节可自行百度
@Configuration
public class SwaggerConfig extends WebMvcConfigurationSupport {
/**
* 跨域设置
*
* @author
*/
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "POST", "OPTIONS", "PUT")
.allowedHeaders("Content-Type", "X-Requested-With", "accept", "Origin", "Access-Control-Request-Method",
"Access-Control-Allow-Headers","Authorization","timestamp","access-control-request-headers")
.exposedHeaders("Access-Control-Allow-Origin", "Access-Control-Allow-Credentials")
.allowCredentials(true).maxAge(3600);
}
}
方法四
Vue本地进行跨域,在项目中config->index.js中进行配置,注意部署时,要和接口地址同源,可参照方式一。
config/index.js文件配置代理,找到proxyTable字段
proxyTable: {
'/api': { // 请求的代称,写在Axios里的BaseUrl
target: 'http://localhost:8083', // 真实请求URl
changeOrigin: true, // 允许跨域
pathRewrite: { // 替换,通配/api的替换成/
'^/api': '/'
}
}
然后在Axios配置baseUrl为/api