vue cli3 项目中解决跨域

最近项目中用到高德api，要做一个天气的模块。

做这个天气的模块，得知道用户所在得城市

于是呢，我就在vue项目中获取了当前用户得ip,根据用户的ip定位了城市

具体代码：

vue页面：

<div>

<remote-js src="http://pv.sohu.com/cityjson?ie=utf-8"></remote-js>

</div>

</template>

export default {

components : {

'remote-js': {

render(createElement) {

return createElement('script', { attrs: { type: 'text/javascript', src: this.src }});

props: {

src: { type: String, required: true },

}

</script>

mounted(){

this.city()

}

methods: {

city(){

var ip = returnCitySN["cip"];

axios.get(`https://restapi.amap.com/v3/ip?ip=${ip}&output=json&key=<你自己的ke'y>`)

.then(function(res) {

})

.catch(function(err) {

console.log(err)

})

}

vue.config.js 文件 (没有就自己在根目录创建)

module.exports = {

devServer: {

proxy: {

'/api': {

targer :"https://restapi.amap.com/v3/ip",

ws: true,

changeOrigin: true,

pathRewrite: {

'^/api': '/api'

}

方法二：

1.执行命令：npm install vue-jsonp --save；

2.添加到main.js中；

import VueJsonp from 'vue-jsonp'

Vue.use(VueJsonp)

3.使用

this.$jsonp('请求url',jsonParams).then(popData => {

if(popData) {

.............

}

})

vue cli3 项目中解决跨域相关推荐

vue 引入pdf跨域问题怎么解决_VUE项目中的跨域问题
[摘要]跨域问题是前端开发人员比较常见的问题, 那么跨域出现的原因, 该如何解决跨域, VUE中对跨域又是怎样处理的呢 [作者]田鋆鹏一. 前端为什么会出现跨域问题? 跨域问题是浏览器同源策略限制, ...
React项目中请求跨域解决方法
React项目中请求跨域解决方法今天经理给我了一个React项目地址,让我拉下来并跑起来,拉下来运行起来后,发现所有的请求都失败了,并且都是由于跨域问题导致的.花了点时间,解决了这个问题,在这里记录 ...
【vue.js开发】如何在vue里面优雅的解决跨域，路由冲突问题
[vue.js开发]如何在vue里面优雅的解决跨域,路由冲突问题当我们在路由里面配置成以下代理可以解决跨域问题 proxyTable: {'/goods/*': {target: 'http://l ...
Vue项目开发过程中解决跨域问题（vue.config.js结合axios）
一.问题描述在本地开发过程中,调用后端提供的接口获取数据将获取的数据渲染到页面中,但是浏览器报错: // 控制台报错信息 Access to XMLHttpRequest at 'http://x. ...
使用 Nginx 部署前后端分离项目，解决跨域问题
前后端分离这个问题其实松哥和大家聊过很多了,上周松哥把自己的两个开源项目部署在服务器上以帮助大家可以快速在线预览(喜大普奔,两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了 ...
Vue实战——使用代理服务器解决跨域问题——No‘Access-Control-Allow-Origin‘ header is present on the requested resource
概论: 目录一.跨域问题是怎么产生的 1.1 跨域问题: 1.2 解决办法三.开启代理服务器第一种方式:(存在弊端) 细节问题:(解释两个弊端) 第二种方式:(重要) 配置多个代理一.跨域问题 ...
vue cli配置代理解决跨域问题
内容跨域问题解决跨域问题 vue cli配置代理跨域问题是由于违背了同源策略,同源策略规定了协议名.主机名.端口号必须一致我们目前所处的位置是http localhost 8080,我们想向 ...
imac下修改本地hosts文件解决react项目中的跨域问题
1.跨域问题:No 'Access-Control-Allow-Origin' header is present on the requested resource. 解决: 1)在本机命令行输入 ...
uni-app项目中H5跨域小程序不跨域怎么解决方法（兼容H5、小程序）
解决这个问题的时候还是用到了之前的文章中提到的"条件编译",当然这只是其中一部分, 下面我们来看一下这种问题的解决方法, ①H5端配置首先在项目中找到一个名为"mani ...

vue cli3 项目中解决跨域

vue cli3 项目中解决跨域相关推荐

最新文章

热门文章