Nginx解决Vue和Laravel之间的跨域问题

最新推荐文章于 2022-09-21 10:59:04 发布

jues

最新推荐文章于 2022-09-21 10:59:04 发布

阅读量568

点赞数

分类专栏：服务器运营文章标签： laravel vue nginx web vue.js

本文链接：https://blog.csdn.net/juesystem/article/details/112920051

版权

本文详细介绍了如何通过配置Nginx解决Vue前端应用与Laravel后端服务之间的跨域问题。针对具体场景，前端Vue运行在http://www.sample.cn，后端Laravel位于http://api.sample.cn。当出现跨域错误后，通过修改Nginx配置文件，并重新加载或重启Nginx服务，问题得到解决。建议前端访问时清除缓存或使用隐私模式尝试。

摘要由CSDN通过智能技术生成

前端JS跨域可以说是一个很古老的问题，网上一搜索会出来一大堆，各种都有，但大多都是涉及篇幅；

折腾了不少时间，终于解决了这个问题，现在记录一下。

以下针对配置Nginx来解决Vue和Laravel之间的跨域问题；

示例（这是举例的域名，不要太在意哈，其它内容是真实能解决问题）：
前端Vue域名：http://www.sample.cn

后端服务域名：http://api.sample.cn

问题情况（前端出现的问题情况，我这里是http://www.sample.cn）：

以下是在浏览器按F12中出现的错误内容；

Access to XMLHttpRequest at 'http://api.sample.cn/api/test' from origin 'http://www.sample.cn' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

问题解决：(注意：是后端服务的Nginx配置，我这里是http://api.sample.cn)

server {

    listen 80;
    server_name api.sample.cn;

    root /sample/api;
    index index.php;

    add_header Content-

最低0.47元/天解锁文章

jues

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Nginx解决Vue和Laravel之间的跨域问题

前端JS跨域可以说是一个很古老的问题，网上一搜索会出来一大堆，各种都有，但大多都是涉及篇幅；以下针对配置Nginx来解决Vue和Laravel之间的跨域问题；示例（这是举例的域名，不要太在意哈，其它内容是真实能解决问题）：前端Vue域名：http://www.sample.cn后端服务域名：http://api.sample.cn问题情况（前端出现的问题情况，我这里是http://www.sample.cn）：Access to XMLHttpRequest at 'http.
复制链接

扫一扫