【js】【跨域问题】前后端分离的跨域问题

最近在研究nodejs,php的前后端分离相关东西,在调用接口的时候碰到一些跨域的问题,经过一段时间的摸索,总结出来的一些东西

php采用的是yii框架,登录的机制或者调用接口都需要前端传递cookie进去,但是nodejsaxios接口等默认是不会传递cookie

  • 跨域解析:浏览器请求非本域名的网站资源,如果目标服务器没有设置跨域的情况下,浏览器是会阻止用户的请求的
  • 跨域的解决途径:可以配置后端服务转发的机制绕开跨域问题;也可以直接配置目标服务器的跨域配置

配置转发

搭建一个和前端处于同一域名下的代理服务器,代理服务器把前端的请求转发到真正的目标服务器,接收到的请求再转发给前端

这个一般都是在nginx,apache,iis里面进行转发的

目标服务器的跨域配置

如果不配置代理服务器的话,那应该配置目标服务器的跨域配置了,如果是二次请求(第一次预请求OPTIONS方法,第二次真正请求GET/POST/PUT/DELETE)那应该配置nginx和后端(PHP/JAVA)代码响应了

 ### nginx 配置
location / {
   if ($request_method = ‘OPTIONS‘) {
       add_header Access-Control-Allow-Origin http://xc.com:9599;
       add_header Access-Control-Allow-Headers *;
       add_header Access-Control-Allow-Methods POST,OPTIONS;
       add_header Access-Control-Allow-Credentials true;
       return 204;
   }
   index  test.php ;
   autoindex  on;
   try_files $uri $uri/ /test.php?$args;
}
//php配置 在返回的header里面添加相应头部
header(‘Access-Control-Allow-Origin:http://frontend.com:9599‘);//容许跨域的前端站点
header(‘Access-Control-Allow-Headers:*‘);//容许传递的header
header(‘Access-Control-Allow-Credentials:true‘);//需要校验 配置此项结合NODEJS的配置项可以通过接口传递cookie
//nodejs 配置
const service = axios.create({
   baseURL: process.env.BASE_API, // api 的 base_url
   timeout: 5000, // 请求超时时间
   withCredentials: true // 允许携带cookie
})

前后端建议采用同域名不同端口,这样避免不同域名下cookie访问问题,配置Credentials是为了便于接口传递cookie,如果接口不用cookie可以不用配置此选项

原文地址:https://www.cnblogs.com/china-flint/p/10308284.html

时间: 2024-10-31 05:27:21

【js】【跨域问题】前后端分离的跨域问题的相关文章

vue+springboot前后端分离工程中跨域问题的解决

vue+springboot前后端分离工程中跨域问题的解决 假如是在同一台机器上开发,前后端分离的工程中出现跨域问题的原因是,前端工程和后端工程运行在不同的端口上.只要协议.域名.端口有一个不同就会产生跨域问题,所以在前端工程中请求后端的接口时就会因为端口不同而产生跨域问题. 一.解决跨域的原理 假设前端A要去访问服务器C,可以在A和C之间之间设置一个代理B,A访问C时先访问B,再由B代为请求C并把请求结果返回给A,这样就可以解决跨域问题.其中需要保证的是A访问B和B访问C都不能存在跨域. 二.

跨域与前后端分离

百度关于跨域的文章几乎每个文章都会有这么一个图和这几个解决方案 只要是跟当前页面所在url不同的请求都属于跨域请求,为什么我可以访问cdn或者引入其他网站的js或者css或者图片,那是因为src这个标签是支持跨域的,你用ajax去获取外网的js,css,图片试试,所以==把页面放在跟请求一个地址的服务器里面,就是最强的解决跨域的方案== 从jq-ajax文章过来的可以回去了,下面的内容超纲了 vue-cli是启动了一个开发版的本地服务器,域名是localhost:端口,在脚手架里写请求自然不可能

前后端分离之跨域问题

最近在做的一个项目,原本是通过SpringMVC结合freemarker模板引擎和JSP实现HTML页面和后端的数据交互,现在为了业务需要,要将前后端拆分出来.使用Restful API的形式进行交互.然后刚上路就遇到坑了,在这里记录一下如何填坑,以防不时之需.这里介绍的方法是SpringMVC架构通过CROS协议解决跨域问题. 错误信息 Response to preflight request doesn't pass access control check: No 'Access-Con

前后端分离,跨域问题

解决跨域问题 1. 什么是跨域 1.1.不同域名的资源访问,存在跨域 1.2.同一个域名不同端口的资源访问,也属于跨域 1.3二级域名不同的资源访问,也属于跨域 只要域名(ip)和端口号有一样不同,那么都是跨域 http://localhost:8080 前端系统 发送Ajax取后端系统获取数据 http://localhost:80   后端系统 以上的两个地址也是跨域 2.跨域问题 跨域不一定会有跨域问题. 因为跨域问题是浏览器对于ajax请求的一种安全限制,也可以说是浏览器的同源策略 同源

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

用Vue-cli脚手架搭建了个demo,前后分离就有跨域问题的出现. vue-clie搭建demo步骤(传送门):https://www.cnblogs.com/wangenbo/p/8487764.html 我自己在网上找了2个接口做测试: CSDN:https://www.csdn.net/api/articles?type=more&category=home&shown_offset=1524276761019196&first_view=false 掘金:https://

前后端分离 ajax 跨域 session 传值 (后端使用 node)

前端:ajax访问时要加上"xhrFields: {withCredentials: true}" ,实现session可以传递 后端:Access-Control-Allow-Credentials 设置为 true:同时 Access-Control-Allow-Origin 必须指定 url npm 安装 express.body-parser.express-session.svg-captcha 后台代码: 1 var express = require('express')

前后端分离开发,跨域访问的apche设置

1,如何让Apache支持跨域访问呢? 步骤: 修改httpd.conf,windows中对应的目录是:C:\wamp\bin\apache\Apache2.4.4\conf\httpd.conf 把LoadModule headers_module modules/mod_headers.so 前面的注释删除 修改  改为:  即: <Directory />    AllowOverride none    Require all granted    Header set Access-

解决傻瓜式前后端分离前端跨域访问的问题

版本号49之后的chrome跨域设置chrome的版本升到49之后,跨域设置比以前严格了,在打开命令上加--disable-web-security之后还需要给出新的用户个人信息的目录.众所周知chrome是需要用gmail地址登录的浏览器,登录后就会生成一个存储个人信息的目录,保存用户的收藏.历史记录等个人信息.49版本之后,如果设置chrome浏览器为支持跨域模式,需要指定出一个个人信息目录,而不能使用默认的目录,估计是chrome浏览器怕用户勿使用跨域模式泄露自己的个人信息(主要是cook

前后端分离的跨域请求问题解决

因为工作中接触到了,就记录下来. 主要是两个jar包的使用 可以自己看看源码或是其他对内部方法讲解的资料. web.xml配置. 原文地址:https://www.cnblogs.com/helloworld-yjh/p/9689465.html