vue前后端分离项目，解决跨域问题

最新推荐文章于 2025-06-21 16:01:57 发布

刘辉丶

最新推荐文章于 2025-06-21 16:01:57 发布

阅读量1.3w

点赞数

CC 4.0 BY-SA版权

分类专栏：日常问题文章标签：前后端分离 vue项目解决跨域问题 springboot解决跨域

本文链接：https://blog.youkuaiyun.com/weixin_41381822/article/details/83583324

最近公司新开发项目是前后端分离项目，前端用的是vue框架，在和前端调试接口时存在拒绝跨域访问403的情况。我这里主要将解决的过程记录一下。

什么是跨域

跨域是浏览器的同源策略造成的，只要是域名、端口、协议有一不同，就会被当做是不同的域，之间的请求就被当做跨域操作。

设置同源限制主要是为了安全，如果没有同源限制存在浏览器中的cookie等其他数据可以任意读取，不同域下DOM任意操作，Ajax任意请求的话如果浏览了恶意网站那么就会泄漏这些隐私数据。

解决方案

1.jsonp

需要注意的是这种方式只支持get请求，并不支持post请求。

2.cors

通过使用自定义的HTTP响应头Header允许接口被跨域请求，实现cors的方式有很多。

第一种方式

这种方式主要是利用cors方式进行配置，这种方式主要是在 nginx.conf 配置文件中加入header配置，从而达到支持跨域的目的，话不多说，上代码。

events{
    worker_connections 1024;
    }

http {
    client_max_body_size 1024m;
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;
    #gzip  on;
    server {
        listen       8888; #自身监听8888端口
        server_name first;
        location / {
            charset utf-8;          #显示中文
            add_header 'Access-Control-Allow-Origin' '*'