php 公司网站源码,用dw设计一个简单网页成品,app开发公司网站,云指建站平台文章目录 一、跨域问题二、解决跨域问题三、结尾 一、跨域问题
在前后端分离的项目中#xff0c;前端通常运行在一个域名或端口上#xff0c;而后端运行在另一个域名或端口上。当浏览器发起跨域请求时#xff0c;即前端页面向后端发送请求的域名、端口或协议与当前页面的域… 文章目录 一、跨域问题二、解决跨域问题三、结尾 一、跨域问题
在前后端分离的项目中前端通常运行在一个域名或端口上而后端运行在另一个域名或端口上。当浏览器发起跨域请求时即前端页面向后端发送请求的域名、端口或协议与当前页面的域名、端口或协议不一致时就会发生跨域问题。
跨域问题是由浏览器的同源策略引起的安全机制。同源策略要求网页只能访问与其来源相同的资源即协议、域名和端口必须一致而跨域请求则突破了这个限制。
当以下任一条件不满足时就会发生跨域问题 不同的协议例如一个页面通过 HTTP 协议加载了 JavaScript然后尝试向使用 HTTPS 协议的服务器发送请求。 不同的域名例如一个页面从 www.example.com 加载了 JavaScript然后尝试向 api.example.com 发送请求。 不同的端口例如一个页面从 www.example.com:8080 加载了 JavaScript然后尝试向 www.example.com:3000 发送请求。 二、解决跨域问题
为了解决跨域问题可以借助Nginx来进行反向代理。以下是使用Nginx解决跨域问题的步骤
在前端服务器上安装和配置Nginx安装教程可以看我上一篇文章《【Linux】Linux中安装Nginx》。在Nginx配置文件中使用反向代理实现跨域。
示例 前端调试页面的地址是http://www.example.com:8080/dist/index.html 后端请求的接口地址是http://api.example.com:8181/api/
Nginx默认配置文件地址 /usr/local/nginx/conf如果安装的时候指定了路径就在你指定的目录下修改配置文件nginx.conf
server{listen 80;server_name www.example.com; # 前端域名或ip# 默认配置无需修改location / {root html;index index.html index.htm;}# 后端接口配置location /api {proxy_pass http://api.example.com:8181;}# 前端页面配置location /dist {proxy_pass http://www.example.com:8080/dist;}}PS前端访问后端API的域名或ip需要设置为server_name的值端口号为监听的端口号然后根据/api匹配的路径转发到后端接口配置的地址上举例后端实际查询用户列表的接口地址为http://api.example.com:8181/api/user/list那么前端页面访问接口时路径应该为http://www.example.com/api/user/list我这里端口是80所以可以省略。 如果前端不修改会出现报错Access to XMLHttpRequest at http://api.example.com:8181/api/user/list from origin http://www.example.com has been blocked by CORS policy: Response to preflight request doesnt pass access control check: No Access-Control-Allow-Origin header is present on the requested resource.就算配置了add_header Access-Control-Allow-Origin * always也无效。 重新加载Nginx配置在终端中执行命令以重新加载Nginx配置文件
$ ./nginx -s reload在重新加载Nginx配置文件之前可以先使用 ./nginx -t 验证nginx配置文件是否正确。
4.页面访问http://www.example.com/dist/index.html。
三、结尾
以上就是全部了为了解决这个问题我头都大了不管怎么改配置都无效最后还是前端改了下马上就可以了所以记录一下。
