在vue中实现跨域方法小结

在vue中 如何实现跨域

跨域问题是Web开发中常见的挑战，那么如何解决跨域呢，我们一起来看看吧！

跨域是什么？

跨域（Cross-Origin）是指网络请求从一个域名（origin）发起，而请求的目标资源位于另一个不同的域名下。由于浏览器的安全策略——同源策略（Same-origin policy），默认情况下不允许不同域名之间的请求直接交互数据。这意味着，如果你的前端应用运行在一个域名（如 example.com），而尝试请求另一个不同域名下的资源（如 api.example.org），那么这种请求就会被认为是跨域请求。

同源策略要求发起请求的域名、协议和端口必须与目标资源完全相同。如果不符合这一条件，浏览器会阻止请求的完成，除非服务器明确表示允许这种跨域请求。

如何解决跨域问题？

1. CORS（跨域资源共享）

CORS 是服务器配置的一种方式。后端可以在响应头中设置 Access-Control-Allow-Origin 来允许特定的域名跨域请求。

Access-Control-Allow-Origin: http://example.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type

Vue 前端可以正常发起请求，但需要后端支持并配置这些 CORS 头。

2. Vue CLI 代理

在 Vue 项目开发环境中，Vue CLI 提供了一个 devServer 配置，可以设置代理服务器来避免跨域。前端请求将先发送到本地服务器，由它代理请求目标后端，解决跨域问题。

在 vue.config.js 中配置：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://backend-server.com', // 代理的目标服务器地址
        changeOrigin: true, // 是否允许跨域
        pathRewrite: { '^/api': '' } // 重写请求路径
      }
    }
  }
}

这里，所有以 /api 开头的请求都会被代理到后端服务器 http://backend-server.com，从而规避跨域问题。

• /api这是代理规则的路径匹配模式。当客户端请求的URL路径以/api开头时，该请求将会被代理到指定的目标服务器。例如，如果客户端请求http://frontend.dev/api/some-resource，那么这个请求将会被代理到目标服务器http://backend-server.com。
• target: 'http://backend-server.com' target属性指定了代理的目标服务器地址。所有匹配路径模式的请求都会被转发到这个地址。在这个例子中，所有以/api开头的请求都会被重定向到http://backend-server.com。
• changeOrigin: true changeOrigin属性用来指示是否应该改变请求的起源信息。当设置为true时，代理会修改请求的起源信息（如主机名、协议等），使得后端服务器不会看到前端服务器的地址，而是看起来像是直接请求的。
• pathRewrite: { '^/api': '' } pathRewrite属性用于重写请求路径。在这个配置中，它移除了所有被代理请求中的/api前缀。例如，如果客户端请求的是http://frontend.dev/api/some-resource，那么经过重写后，实际发送到后端服务器的请求将是http://backend-server.com/some-resource。 3. JSONP (仅限 GET 请求)

JSONP 是一种历史上的跨域解决方案，但只能用于 GET 请求。它通过 <script> 标签的跨域加载机制来实现。一般现代应用不推荐使用这种方式。

4. Nginx 反向代理

在生产环境中，通常使用 Nginx 反向代理来处理跨域请求。Nginx 可以作为前端和后端之间的中介，接收前端请求后，再将请求转发到后端，从而避免跨域问题。

配置示例：

server {
    listen 80;
    server_name my-frontend.com;
    location /api/ {
        proxy_pass http://backend-server.com;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

前端通过 /api 访问后端资源，不会触发跨域。

5. 服务器端中转

如果跨域问题无法通过其他方式解决，还可以通过中转服务器的方式，前端请求发到一个同源的服务器，由该服务器再向目标服务器发起请求。这种方式适合某些复杂的跨域场景。

总结

• 开发环境：通常使用 Vue CLI 的代理来解决跨域问题。
• 生产环境：后端配置 CORS 或使用 Nginx 反向代理，或者通过服务器中转解决跨域问题。

扩展资料：

Vue项目前端部署——nginx方式 

1. 准备好服务器，下载安装nginx并启动

随便在网上找一篇文章，下载安装之后，启动nginx

2. vue项目编译打包

在项目根目录下 运行npm run build 进行编译打包

打包完成之后，在项目根目录下会多一个dist目录

3. 将dist目录上传到服务器上

4. 配置nginx安装目录下的nginx.config文件

因为使用到nginx进行代理，所以vue.config.js里面的代理是不会生效的，我们使用nginx来配置反向代理,配置完成保存文件

server {
        listen       3012; #访问端口
        server_name  localhost;
        location / {
       	   root /xx/xx/xx/dist; #前端dist包地址
           index  index.html index.htm;
	       try_files $uri $uri/ /index.html;
		}
        location /ele/ {
		proxy_set_header x-forwarded-for  $remote_addr;
		proxy_pass http://xx.xx.xx.xx:8080/; #后端代理地址
		}
	charset utf-8;
    }

5. 重启nginx

使用service nginx restart 或则 nginx -s reload 进行nginx重启

6. 访问地址

地址为服务器地址，端口是nginx配置的访问端口，
因为我配置的是3012，所以直接 ip:3012即可。如果首页有其他路由，可以使用ip:3012/router的方式，比如首页路由是/index 访问地址就是ip:3012/index

到此这篇关于Vue项目使用nginx方式部署前端的文章就介绍到这了,更多相关Vue nginx部署内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论