如何配置Vue项目跨域访问和代理proxy设置以实现长尾词优化？

本文共计779个文字，预计阅读时间需要4分钟。

在Vue单页应用项目中开发时，避免不了要请求后端服务，这时经常会遇到跨域问题。以下是两种常用的解决方案：

1. 后端设置允许跨域访问 - 方法：在后端配置中，允许来自特定前端域名的跨域请求。 - 示例：如果使用Node.js和Express框架，可以在`app.use(cors())`设置跨域中间件。

2. 前端使用代理访问后端 - 方法：通过配置代理，使前端请求可以绕过浏览器的同源策略，访问不同的域名。 - 示例：在Vue项目中，可以在`vue.config.js`文件中配置代理，如下所示：

javascriptmodule.exports={ devServer: { proxy: { '/api': { target: 'http://你的后端域名', // 后端服务器地址 changeOrigin: true, pathRewrite: { '^/api': '' // 重写路径，去掉路径中的/api } } } }};

以上两种方法可以有效解决跨域问题。

在vue单页应用项目开发时，避免不了要请求后端，这时通常就会出现跨域问题。有2种常用的解决方案

后端设置允许跨域访问

前端通过代理进行访问后端

下面我们只说说如何配置vue-cli代理访问：

vue-cli代理

最简单就是配置vue conifg进行实现

下面配置3个请求的后端，分别是：

请求localhost:4201/adminapi/*会代理请求localhost:8180/*

请求localhost:4201/portalapi/*会代理请求localhost:8185/*

请求localhost:4201/securityapi/*会代理请求localhost:8089/*

由于vue-cli是基于webpack，因此webpack的devServer选项都是支持配置的

module.exports = { // ... devServer: { port: 4201, proxy: { '/adminapi': { target: 'localhost:8180', ws: true, changeOrigin: true, pathRewrite: { '^/adminapi': '' } }, '/portalapi/': { target: 'localhost:8185/', ws: true, changeOrigin: true, pathRewrite: { '^/portalapi': '' } }, '/securityapi/': { target: 'localhost:8089/', ws: true, changeOrigin: true, pathRewrite: { '^/securityapi': '' } } }, disableHostCheck: true, // 这是由于新版的webpack-dev-server出于安全考虑，默认检查hostname，如果hostname 不是配置内的，将中断访问。 }, //... }

Nodejs做中间时行路由转发

可以用nodejs和框架express对请求做路由转发。

在生产环境下更可以免去使用nginx配置反向代理。

方案各有利弊，技术架构选型时需要针对自己的项目环境，并且适合自己的团队是最好的。

后端跨域访问

后端的跨域访问设置也是比较简单的，不同语言JAVA PHP Python Go的设置也大同小异。

查询一下都有比较多的资料，但在生产环境下，为了安全起见，还是建议不要设置允许跨域访问，或者限制允许跨域的IP

补充知识：Vue 过滤器filter调用data、methods中的东西报错

今天学习了filter，我将过滤的过滤方法放到methods中发现怎么调用都说没有这个function

然后我把log了一下这个this 发现这个this指向的竟然是window

于是网上找到了如下的解决方法：

定义一个全局变量:

let that;

在beforeCreate生命周期将this赋值给that，通过that获得

var vm = new Vue({ el: '#app', data: { }, beforeCreate: function () { that = this }, methods:{ fom(fmt){ ... } }, ...., filters: { dateformate: function (val) { return that.fom("yyyy-MM-dd") } } })

以上这篇Vue项目配置跨域访问和代理proxy设置方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持易盾网络。