java解决跨域问题_Java随记_Nginx解决跨域问题

1ae07782b0ed944a6b1875dc5565ecd7.png

跨域介绍

跨域是指浏览器不允许当前的所在源去请求另一个源的数据。
源是由协议、端口、域名三者组成,只要有一个不相同那就是跨域。

3d8ab748828b10b21605b9159edf965a.png

在开发前后端分离的项目时,常常会碰到跨域请求的问题。即由于浏览器的安全性限制,不允许 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.选择版本下载

79c353676734a33543c55231d817e72b.png

3.解压压缩包

b0500f7bf8f376a766f29b9888c1aa82.png

4.在nginx目录下启动cmd命令,输入nginx -vv,若出现版本号,则安装成功

2f457cfd4e196464fba4a5111fc51d22.png

解决跨域

前端问题

这里指使用原生Javascript访问后端接口,我们就需要使用Nginx程序,拦截某些关键字段,在进行地址转发。

1.打开nginx目录下的conf目录里面nginx.conf文件

a9c685ff01a6984a39d1b4c8aa48f06c.png

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,重启服务

注意:每次修改配置文件都需要执行上述命令才能生效

f687cf03acd88d9e0666527aa254d0c1.png

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");
​
    }
}
表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页