vue阻止跨域

在进行Web开发中，常常会遇到跨域问题。比如我们的前端使用Vue框架访问后端服务，由于前端代码运行在浏览器中，而后端服务运行在服务器中，两者的域名或端口不一致，就会出现跨域问题。

vue阻止跨域

防止跨域的方法有很多种，本文介绍如何使用Vue.js阻止跨域问题。

1.使用代理


module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',changeOrigin: true,pathRewrite: {
          '^/api': '/mock'
        }
      }
    }
  }
}

上述代码是Vue.js配置代理的示例。我们使用了webpack-dev-server提供的proxy选项，将/api目录下的请求代理到'http://localhost:8080/mock'上。changeOrigin设置成true表示开启跨域，pathRewrite将/api替换成/mock。

2.JSONP


jsonp('http://api.example.com/data',{},function (data) {
  console.log(data)
})

JSONP是一种跨域解决方案，它利用script标签可以跨域加载外部脚本的特性，在前端页面中添加一个script标签，将请求的url作为src属性值即可。服务器返回的json数据需要被包裹在一个函数调用中，这个函数名由前端指定，服务器返回的数据形如callback({data})。前端可以通过回调函数获得数据。

3.CORS

CORS是一种跨域资源共享的方案，它通过在响应头中添加Access-Control-Allow-Origin字段允许跨域请求。下面是一个配置CORS的示例：


Access-Control-Allow-Origin: http://localhost:8080
Access-Control-Allow-Methods: GET,POST,PUT

上述代码表示只允许来自http://localhost:8080的请求，允许GET、POST和PUT方法。这些响应头需要在服务器端设置。

总结：

以上介绍了Vue.js中防止跨域的三种方法，分别是使用代理、JSONP、CORS。不同的方法针对不同的场景有不同的优势和不足。我们需要根据具体情况选择合适的解决方案。

vue阻止跨域

相关文章