利用 Nginx 处理 Vue 开发环境的跨域

morgan 发布于2019-07-25 14:48 / 575人阅读

摘要：需求本地测试域名与线上域名相同，以便正确传递和进行测试。注由于登录后，相关被加在四级域名上，因而需要做到本地测试域名和线上接口域名相同。方案配置文件使线上域名指向配置进行对应转发配置以免出现报错

1. 需求

本地测试域名与线上域名相同，以便正确传递 Cookie 和进行 SSO 测试。

注：由于 SSO 登录后，相关 Cookie 被加在四级域名上，因而需要做到本地测试域名和线上接口域名相同。

2. 方案

配置 Host 文件使线上域名指向 Localhost：

127.0.0.1 product.xxx.xxx.com

配置 Nginx 进行对应转发：

server {
    listen       80;
    listen       [::]:80;
    server_name  ${product.xxx.xxx.com};

    location /api {
        proxy_pass https://${ip.ip.ip.ip};
        proxy_set_header Host $host;
    }

    location / {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
    }    
}

配置 vue.config.js 以免出现 Invalid Host header 报错：

{
    devServer: {
        disableHostCheck: true
    }
}

云服务器 GPU云服务器 nginx服务器跨域 nginx环境变量 Vue开发 vue组件开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/40472.html

前端常见跨域解决方案（全）

摘要：需注意的是由于同源策略的限制，所读取的为跨域请求接口所在域的，而非当前页。目前，所有浏览器都支持该功能需要使用对象来支持，也已经成为主流的跨域解决方案。反向代理接口跨域跨域原理同源策略是浏览器的安全策略，不是协议的一部分。什么是跨域？跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。广义的跨域： 1.) 资源跳转： A链接、重定向、表单提交 2.) 资源...

canger 2019-07-25 15:04 评论0 收藏0
大话javascript 5期：跨域

摘要：同源策略所谓同源是指协议，域名，端口均相同。同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。需注意的是由于同源策略的限制，所读取的为跨域请求接口所在域的，而非当前页。一、什么是跨域 1.URL解析 URL （Uniform Resource Locator ）统一资源定位符（URL）是用于完整地描述Internet上网页和其他资源的地址的...

jzzlee 2019-08-23 16:42 评论0 收藏0
九种 “姿势” 让你彻底解决跨域问题

摘要：什么是跨域当协议域名端口号，有一个或多个不同时，有希望可以访问并获取数据的现象称为跨域访问，同源策略限制下都是不支持跨域的。命名是随意的，只要是符合一级域名与二级域名的关系即可，然后访问。 showImg(https://segmentfault.com/img/remote/1460000018998493); 阅读原文同源策略同源策略/SOP（Same origin pol...

charles_paul 2019-08-23 12:18 评论0 收藏0
那些年曾谈起的跨域

摘要：在中，在不同的域名下面进行数据交互，就会遇到跨域问题，说到跨域首先要从同源说起，浏览器为了提供一种安全的运行环境，各个浏览器厂商协定使用同源策略。在上面说过是不受同源策略限制的，但是出于安全原因，浏览器限制从脚本内发起的跨源请求。对于前端开发来说跨域应该是最不陌生的问题了，无论是开发过程中还是在面试过程中都是一个经常遇到的一个问题，在开发过程中遇到这个问题的话一般都是找后端同学去解决...

galois 2019-08-23 18:13 评论0 收藏0
前端跨域资源请求： JSONP/CORS/反向代理

摘要：此时完成的跨域代理配置仅仅是在开发环境下生效，到了生产环境下如果是放到服务器上则还需要借助的反向代理来进行跨域的代理。跨域指的是浏览器不能执行其他网站的脚本，它是由浏览器的同源策略造成的，是浏览器对 JavaScript 施加的安全限制。同源就是指域名，协议，端口均相同。两个网域若域名、协议、端口任一不同则二者的通信就出现了跨域问题，前端的跨域问题普通存在于两个阶段，一个是开发环境...

番茄西红柿 2019-04-23 11:40 评论0 收藏0