前后台分离之后跨域的问题

最近在用vue开发项目,也是头一次接触前后端分离的项目。那么,就会接触到跨域的问题

1、什么是跨域

JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。那什么是跨域呢,简单地理解就是因为JavaScript同源策略的限制,a.com域名下的js无法操作b.com或是c.a.com域名下的对象。
当协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域。不同域之间相互请求资源,就算作“跨域”。
有一点必须要注意:跨域并不是请求发不出去,请求能发出去,服务端能收到请求并正常返回结果,只是结果被浏览器拦截了。之所以会跨域,是因为受到了同源策略的限制,同源策略要求源相同才能正常进行通信,即协议、域名、端口号都完全一致。
 

2、解决跨域的方法

https://www.cnblogs.com/ldlx-mars/p/7816316.html

### 配置 Nginx 解决前后端分离架构中的 CORS 问题 #### 定义资源共享需求 当前端应用托管在 `https://frontend.example.com`,而后端 API 服务托管在 `https://api.example.com` 时,在未正确配置的情况下,浏览器的安全机制会阻止从前端向后端发起的请求[^2]。 #### 修改 Nginx 配置文件处理 CORS 请求 为了使 Nginx 能够适当地响应来自不同源的 HTTP 请求并允许这些请求访问资源,可以在 Nginx 的站点配置文件中加入特定的头部信息来控制哪些来源可以访问该服务器上的资源: ```nginx server { listen 80; server_name api.example.com; location / { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; if ($request_method = 'OPTIONS') { return 204; } proxy_pass http://backend_server; } } ``` 这段代码设置了三个主要的 CORS 响应头: - `Access-Control-Allow-Origin`: 表明哪个名下的页面被允许发送站HTTP请求。这里设置为通配符表示任何网站都可以访问此接口。 - `Access-Control-Allow-Methods`: 列出了支持的方法列表。 - `Access-Control-Allow-Headers`: 指定了预检请求中携带的额外字段名称[^1]。 对于简单的 GET 或 POST 请求来说,上述配置已经足够;但对于复杂的请求(比如包含自定义 header),还需要特别处理 OPTIONS 方法作为预检请求的一部分,并返回状态码 204 No Content 来告知客户端继续执行实际的操作[^3]。 #### 测试与验证 完成以上更改之后重启 Nginx 并测试新的配置是否生效。可以通过开发者工具查看网络请求详情确认响应头里包含了预期的 CORS 设置项。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值