nginx 解决跨域问题记录

原创已于 2022-03-11 17:52:32 修改 · 226 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#nginx #vue.js #前端

于 2021-08-13 17:29:01 首次发布

本文介绍了如何在前端Vue项目中使用axios进行API请求，并展示了后端SpringBoot的配置，以及Nginx服务器的跨域设置，确保前端与后端的顺利交互。通过设置Access-Control-Allow-*头信息，实现了跨域访问，同时在Nginx中配置了代理以处理请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端页面

采用Vue axios发出请求

script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var a = new Vue({
            el:"#app",
            data:{
                url:""
            },
            methods:{
                test:function(){
                axios.get("http://test.com/test")
                .then(function(response){
                    console.log(response.data)
                })
                }
            }
        })
    </script>

后台 springboot


@RestController

public class MyController {
    @Autowired
    User user;
    @RequestMapping("/test")
    public User test(){
        return user;
    }
}

nginx 文件配置（重点）

 server {
        listen       80;
        server_name  test.com;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

	#是否允许请求带有验证信息
	add_header Access-Control-Allow-Credentials true;
	#允许跨域访问的域名,可以是一个域的列表，空格隔开，也可以是通配符*（不建议）
	add_header Access-Control-Allow-Origin  *;
	#允许使用的请求方法，以逗号隔开，可以用 *
	add_header Access-Control-Allow-Methods 'POST,GET,OPTIONS,PUT,DELETE';
	#预检命令的缓存，如果不缓存每次会发送两次请求，单位为秒。
	#第一次是浏览器使用OPTIONS方法发起一个预检请求，第二次才是真正的异步请求
    add_header Access-Control-Max-Age 3600;
    
	#允许脚本访问的返回头
	add_header Access-Control-Allow-Headers 'x-requested-with,content-type,Cache-Control,Pragma,Date,x-timestamp';	
	#允许自定义的头部，以逗号隔开,大小写不敏感
	add_header Access-Control-Expose-Headers 'WWW-Authenticate,Server-Authorization';
	#P3P支持跨域cookie操作
	add_header P3P 'policyref="/w3c/p3p.xml", CP="NOI DSP PSAa OUR BUS IND ONL UNI COM NAV INT LOC"';
	
        location / {
         #   root   html;
         #  index  index.html index.htm;
         proxy_pass  http://127.0.0.1:8080;
        }

#是否允许请求带有验证信息
add_header Access-Control-Allow-Credentials true;
#允许跨域访问的域名,可以是一个域的列表，空格隔开，也可以是通配符*（不建议）
add_header Access-Control-Allow-Origin  *;
#允许使用的请求方法，以逗号隔开，可以用 *
add_header Access-Control-Allow-Methods 'POST,GET,OPTIONS,PUT,DELETE';
#预检命令的缓存，如果不缓存每次会发送两次请求，单位为秒。
#第一次是浏览器使用OPTIONS方法发起一个预检请求，第二次才是真正的异步请求
add_header Access-Control-Max-Age 3600;

#允许脚本访问的返回头
add_header Access-Control-Allow-Headers 'x-requested-with,content-type,Cache-Control,Pragma,Date,x-timestamp';	
#允许自定义的头部，以逗号隔开,大小写不敏感
add_header Access-Control-Expose-Headers 'WWW-Authenticate,Server-Authorization';
#P3P支持跨域cookie操作
add_header P3P 'policyref="/w3c/p3p.xml", CP="NOI DSP PSAa OUR BUS IND ONL UNI COM NAV INT LOC"';

请求成功页

在这里插入图片描述