Vue Nginx 配置跨域

cd ~/Homestead

已于 2023-07-12 15:04:29 修改

阅读量1.9k

点赞数

文章标签： vue.js nginx 前端

于 2023-03-25 16:25:15 首次发布

本文链接：https://blog.csdn.net/xiaoyangxiaodong/article/details/129768377

版权

文章介绍了三种解决跨域问题的方法：通过Nginx配置SSL证书和跨域设置，Vite的代理配置以及Vue应用中的代理设置。在Nginx配置中涉及SSL证书、server_name和proxy_pass等关键参数；Vite.config.ts和vue.config.js文件中设置代理以实现API请求的转发。

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

1、方案1：Nginx配置跨域

1.nginx 配置SSL证书

   listen *:443;
   server_name gitlab.xxxxxx.com;
   server_tokens off; ## Don't show the nginx version number, a security best practice
   ssl on;
   ssl_certificate /etc/gitlab/xxxxxx.com.pem;
   ssl_certificate_key /etc/gitlab/xxxxxx.com.key;
   ssl_session_timeout 5m;

1. nginx 配置跨域
- 新版：
旧版：

配置完成后在vue中就可以使用了；vite、axios都不用单独处理

方案2：Vite配置代理

vite.config.ts 配置代理
网络请求中设置请求域名别名：

方案3： vue配置代理

http.js：

const baseURL = '/api/demo';
export const getDemoList= (data) => {
	return axios({
		method: 'post',
		headers: { 'content-type': 'application/json;charset=UTF-8' },
		url: `${baseURL}/interface1.jsp`,
		data: JSON.stringify(data),
	})
}

vue.config.js

    proxy:{
      '/api':{
        target: 'http://后端服务器IP:8091',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api': ''}
      }
    }