跨域介绍
跨域是指浏览器不允许当前的所在源去请求另一个源的数据。
源是由协议、端口、域名三者组成，只要有一个不相同那就是跨域。
在开发前后端分离的项目时，常常会碰到跨域请求的问题。即由于浏览器的安全性限制，不允许 AJAX 访问协议不同、域名不同、端口号不同的数据接口，否则会出报错误。如果是跨域访问，这时候就会报错：
Access to image at 'http://localhost:8080/api/user/select' from origin 'http://localhost:9000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
安装Nginx
1.安装包下载地址
http:// nginx.org/en/download.h tml
2.选择版本下载
3.解压压缩包
4.在nginx目录下启动cmd命令，输入nginx -vv，若出现版本号，则安装成功
解决跨域
前端问题
这里指使用原生Javascript访问后端接口，我们就需要使用Nginx程序，拦截某些关键字段，在进行地址转发。
1.打开nginx目录下的conf目录里面nginx.conf文件
2.修改配置文件
http {
## 文件扩展名与文件类型映射表
include mime.types;
## 默认文件类型
default_type application/octet-stream;
## 开启服务日志
sendfile on;
## 连接超时时间
keepalive_timeout 65;
## 服务配置
server {
## 监听端口
listen 8088;
## 监听地址
server_name localhost;
## 请求的前端url过滤
location / {
## 请求转向地址
proxy_pass http://localhost:9000;
}
## 请求的后端url过滤
location /api {
proxy_pass http://localhost:8080/api;
}
}
}
- server_name + listen：等价于访问地址
localhost:8088 - location /：等价于访问地址
localhost:8088下的路径，会转发为http://localhost:9000。比如访问localhost:8088/index就会转发至http://localhost:9000/index。 - location /api：等价于访问地址
localhost:8088/api下的路径，会转发为localhost:8080/api。比如访问localhost:8088/api/user/select就会转发至http://localhost:8080/api/user/select。
3.在nginx目录下启动cmd命令，输入start nginx，开启服务
4.在nginx目录下启动cmd命令，输入nginx -s reload，重启服务
注意：每次修改配置文件都需要执行上述命令才能生效
5.测试前端和后端地址
注意：访问地址已经变更!
前端地址：http://localhost:8088
后端地址： http:// localhost:8088/user/sel ect
Vue问题
如果事Vue项目出现跨域问题，会比原生Javascript简单些。因为Vue里面相当于Nginx，已经做了一层转发了，我们只要配置代理即可。
1.在vue.config.js文件里，添加如下代码
module.exports = {
devServer: {
proxy: {
'/api': {
// 后台接口地址
target: 'http://127.0.0.1:8080',
// 如果是https接口，需要配置这个参数
secure: false,
// 如果是代理websocket，需要配置这个参数
ws: true,
// 是否跨域
changOrigin: true,
// 地址重写
pathRewrite: {
'^/api': ''
}
}
}
}
}
这时候就会将接口地址进行替换，比如：
# 原接口地址
http://127.0.0.1:8080/user/select
# 替换接口地址
/api/user/select
2.Vue中调用接口方式
<script>
export default {
methods: {
selectUser: function() {
// 接口地址更改
const api = '/api/user/select'
axios.post(api).then(function (response) {
console.log(response)
}).catch(function (error) {
console.log(error)
})
},
}
}
</script>
3.重启项目
npm run dev
后端问题
创建配置文件WebConfig文件，设置所有请求都允许跨域
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowCredentials(true)
.allowedOrigins("*")
.allowedMethods("GET","POST","DELETE")
.allowedHeaders("*")
.exposedHeaders("Access-Control-Allow-Origin");
}
}
